<template>
	<view class="content">
		<!-- 当前日期 -->
		<view class="content_date">
			{{pageDate}} ({{pageDate2}})
		</view>
	<!-- 	<view class="phoneList_view" @click="openUpdatePage()" style="margin-left: 10rpx;">
			<img src="@/static/images/icon_gengxin.png" class="phoneList_icon" alt="">
		</view> -->
		<view :class="navState == 1 ? 'tabNav' : 'tabNav2'">
			<view class="tabNav_item" :style="navState == 1 ? 'color:#fff' : 'color: #5F6475'" @click="onTabNav(1)">
				家宽装维
			</view>
			<view class="tabNav_item" :style="navState == 2 ? 'color:#fff' : 'color: #5F6475'" @click="onTabNav(2)">
				政企装维
			</view>
		</view>
		<view class="content_nr" v-show="navState == 1">
			<!-- 服务质量领先 -->
			<view class="wlnltsView wlnltsViewBg2" style="margin-top: 76rpx;background-position: 0 14rpx;height: 1630rpx;">
				<img src="@/static/images/AgoodStart/kmhzwztbzqk.png" class="wlnltsView_TitleTop" style="margin-top: -68rpx;" alt="">
				<view class="wlnltsView_nr bg2" style="margin-top: 22rpx;">
					装机累计情况
				</view>
				<view class="statisticalCycle">
					统计周期：{{'1月1日' +'-'+ pageData.EndTime}}
				</view>
				<view class="wlnltsView_nr2">
					<img src="@/static/images/AgoodStart/icon/icon4.png" class="wlnltsView_icon" alt="">
					<span class="wlnltsView_qssj">全省装机累计受理量(含FTTR)： </span>
					<span class="wlnltsView_qssjNr">{{pageData.ZjljslNum}}</span>
				</view>
				<!-- 饼图 -->
				<view style="margin: 0 24rpx;display: flex;align-items: center;">
					<l-echart ref="chartRef01" style="width:550rpx; height:280rpx"></l-echart>
					<view class="echart_data">
						<view style="width: 100rpx;height: 38rpx;">
							{{pageData.ZjljwcNum}}
						</view>
						<view style="width: 100rpx;height: 38rpx;">
							{{pageData.ZjljtdNum}}
						</view>
						<view style="width: 100rpx;height: 38rpx;">
							{{pageData.ZjzcztNum}}
						</view>
						<view style="width: 100rpx;height: 38rpx;">
							{{pageData.ZjcsztNum}}
						</view>
						<view style="width: 100rpx;height: 38rpx;">
							{{pageData.DsptdlNum}}
						</view>
					</view>
				</view>
				<view class="dashed-border-top"></view>
				<!-- 堆叠图 -->
				<view style="margin: 0 24rpx;">
					<l-echart ref="chartRefDD" style="width:660rpx; height:350rpx"></l-echart>
				</view>
				<view class="wlnltsView_nr2">
					<img src="@/static/images/AgoodStart/icon/icon4.png" class="wlnltsView_icon" alt="">
					<span class="wlnltsView_qssj">全省FTTR累计受理量： </span>
					<span class="wlnltsView_qssjNr">{{pageData.FttrljslNum}}</span>
				</view>
				<!-- 饼图 -->
				<view style="margin: 0 24rpx;display: flex;align-items: center;">
					<l-echart ref="chartRef02" style="width:470rpx; height:280rpx"></l-echart>
					<view class="echart_data">
						<view style="width: 100rpx;height: 38rpx;">
							{{pageData.FttrljwcNum}}
						</view>
						<view style="width: 100rpx;height: 38rpx;">
							{{pageData.FttrljtdNum}}
						</view>
						<view style="width: 100rpx;height: 38rpx;">
							{{pageData.FttrzcztNum}}
						</view>
						<view style="width: 100rpx;height: 38rpx;">
							{{pageData.FttrcsztNum}}
						</view>
						<view style="width: 100rpx;height: 38rpx;">
							{{pageData.FttrdsptdlNum}}
						</view>
					</view>
				</view>
				<view class="dashed-border-top"></view>
				<!-- 堆叠图 -->
				<view style="margin: 0 24rpx;">
					<l-echart ref="chartRefDD2" style="width:660rpx; height:350rpx"></l-echart>
				</view>
			<!-- 	<view class="wlnltsView_nr2">
					<img src="@/static/images/AgoodStart/icon/icon4.png" class="wlnltsView_icon" alt="">
					<span class="wlnltsView_qssj">集客装机累计情况 (装维工单条数)</span>
				</view>
				<view class="zwdrbzqk">
					<view class="zwdrbzqk_leftCity">
						<img src="@/static/images/AgoodStart/icon/icon4.png" class="wlnltsView_icon" style="width: 80rpx;" alt="">
						<view class="xuhao">
						</view>
						<view class="zwdrbzqk_leftCity_nr" v-for="(item,index) in cityList4" :key="index">
							{{item}}
						</view>
					</view>
					<view class="zwdrbzqk_right">
							<view class="zwdrbzqk_topTitle">
								<view class="zwdrbzqk_leftCity_nr2" style="width: 245rpx;">
									商客宽带
								</view>
								<view class="zwdrbzqk_leftCity_nr2" style="width: 245rpx;">
									FTTO 
								</view>
							</view>
						<view class="zwdrbzqk_topTitle" style="margin-top: 10rpx;">
							<view class="zwdrbzqk_leftCity_nr2" style="width: 126rpx;">
								受理量
							</view>
							<view class="zwdrbzqk_leftCity_nr2" style="width: 110rpx;">
								退单量
							</view>
							<view class="zwdrbzqk_leftCity_nr2" style="width: 126rpx;">
								受理量
							</view>
							<view class="zwdrbzqk_leftCity_nr2" style="width: 110rpx;">
								退单量 
							</view>
						</view>
							<view class="zwdrbzqk_Num">
								<view class="zwdrbzqk_leftCity_nr3" v-for="(item,index) in numList4" :key="index">
									
									<view class="zwdrbzqk_NumItem" style="width: 126rpx;">
										{{item.SkslNum}}
									</view>
									<view class="zwdrbzqk_NumItem" style="width: 110rpx;">
										{{item.SkwcNum}}
									</view>
									<view class="zwdrbzqk_NumItem" style="width: 126rpx;">
										{{item.FttoslNum}}
									</view>
									<view class="zwdrbzqk_NumItem" style="width: 110rpx;">
										{{item.FttowcNum}}
									</view>
									
								</view>
							</view>
					</view>
				</view> -->
				<!-- <view class="beizhu">
					备注 : 装维工单数据统计
				</view> -->
			</view>
			<!-- 装维当日保障情况 -->
			<view class="wlnltsView wlnltsViewBg3" style="background-position: 0 0;height: 100%;padding-bottom: 60rpx;">
				<view class="wlnltsView_nr" >
					装维当日保障情况
				</view>
				<view class="statisticalCycle">
					统计周期：{{pageData.EndTime}}
				</view>
				<view class="zwdrbzqk">
					<view class="zwdrbzqk_leftCity">
						<view class="xuhao">
							01
						</view>
						<view class="zwdrbzqk_leftCity_nr" v-for="(item,index) in cityList" :key="index">
							{{item}}
						</view>
					</view>
					<view class="zwdrbzqk_right">
							<view class="zwdrbzqk_topTitle">
								<view class="zwdrbzqk_leftCity_nr2" style="width: 245rpx;">
									装机受理量（含FTTR）
								</view>
								<view class="zwdrbzqk_leftCity_nr2" style="width: 245rpx;">
									装机完成量（含FTTR）
								</view>
							</view>
							<view class="zwdrbzqk_topTitle" style="margin-top: 10rpx;">
								<view class="zwdrbzqk_leftCity_nr2" style="width: 126rpx;">
									当日值
								</view>
								<view class="zwdrbzqk_leftCity_nr2" style="width: 110rpx;">
									日环比
								</view>
								<view class="zwdrbzqk_leftCity_nr2" style="width: 126rpx;">
									当日值
								</view>
								<view class="zwdrbzqk_leftCity_nr2" style="width: 110rpx;">
									日环比
								</view>
							</view>
							<view class="zwdrbzqk_Num">
								<view class="zwdrbzqk_leftCity_nr3" v-for="(item,index) in numList" :key="index">
									<view class="zwdrbzqk_NumItem" style="width: 126rpx;">
										{{item.DrzjslNum}}
									</view>
									<view class="zwdrbzqk_NumItem" :style="item.DrzjslRate > 0 ? 'width: 110rpx;color:#FF3B2F' : item.DrzjslRate < 0 ? 'width: 110rpx;color:#0CB480' : 'width: 110rpx;'">
										{{item.DrzjslRate}}%
									</view>
									<view class="zwdrbzqk_NumItem" style="width: 126rpx;">
										{{item.DrzjwcNum}}
									</view>
									<view class="zwdrbzqk_NumItem" :style="item.DrzjwcRate > 0 ? 'width: 110rpx;color:#FF3B2F' : item.DrzjwcRate < 0 ? 'width: 110rpx;color:#0CB480' : 'width: 110rpx;'">
										{{item.DrzjwcRate}}%
									</view>
								</view>
							</view>
					</view>
				</view>
				<view class="fengexian"></view>
				<view class="zwdrbzqk">
					<view class="zwdrbzqk_leftCity">
						<view class="xuhao">
							02
						</view>
						<view class="zwdrbzqk_leftCity_nr" v-for="(item,index) in cityList2" :key="index">
							{{item}}
						</view>
					</view>
					<view class="zwdrbzqk_right">
							<view class="zwdrbzqk_topTitle">
								<view class="zwdrbzqk_leftCity_nr2" style="width: 245rpx;">
									FTTR受理量
								</view>
								<view class="zwdrbzqk_leftCity_nr2" style="width: 245rpx;">
									FTTR完成量 
								</view>
							</view>
						<view class="zwdrbzqk_topTitle" style="margin-top: 10rpx;">
							<view class="zwdrbzqk_leftCity_nr2" style="width: 126rpx;">
								当日值
							</view>
							<view class="zwdrbzqk_leftCity_nr2" style="width: 110rpx;">
								日环比
							</view>
							<view class="zwdrbzqk_leftCity_nr2" style="width: 126rpx;">
								当日值
							</view>
							<view class="zwdrbzqk_leftCity_nr2" style="width: 110rpx;">
								日环比
							</view>
						</view>
							<view class="zwdrbzqk_Num">
								<view class="zwdrbzqk_leftCity_nr3" v-for="(item,index) in numList2" :key="index">
									
									<view class="zwdrbzqk_NumItem" style="width: 126rpx;">
										{{item.DrfttrslNum}}
									</view>
									<view class="zwdrbzqk_NumItem" :style="item.DrfttrslRate > 0 ? 'width: 110rpx;color:#FF3B2F' : item.DrfttrslRate < 0 ? 'width: 110rpx;color:#0CB480' : 'width: 110rpx;'">
										{{item.DrfttrslRate}}%
									</view>
									<view class="zwdrbzqk_NumItem" style="width: 126rpx;">
										{{item.DrfttrwcNum}}
									</view>
									<view class="zwdrbzqk_NumItem" :style="item.DrfttrwcRate > 0 ? 'width: 110rpx;color:#FF3B2F' : item.DrfttrwcRate < 0 ? 'width: 110rpx;color:#0CB480' : 'width: 110rpx;'">
										{{item.DrfttrwcRate}}%
									</view>
									
								</view>
							</view>
					</view>
				</view>
				<view class="fengexian"></view>
				<view class="zwdrbzqk">
					<view class="zwdrbzqk_leftCity" style="margin-top: -54rpx;">
						<view class="xuhao" style="margin: 22rpx 0 5rpx 0;">
							03
						</view>
						<view class="zwdrbzqk_leftCity_nr" v-for="(item,index) in cityList3" :key="index">
							{{item}}
						</view>
					</view>
					
					<view class="zwdrbzqk_right">
							<view class="zwdrbzqk_topTitle">
								<view class="zwdrbzqk_leftCity_nr2" style="width: 150rpx;">
									投诉工单量
								</view>
								<view class="zwdrbzqk_leftCity_nr2" style="width: 165rpx;">
									投诉超时工单量
								</view>
								<view class="zwdrbzqk_leftCity_nr2" style="width: 165rpx;">
									装维人员参与率
								</view>
							</view>
							<view class="zwdrbzqk_Num">
								<view class="zwdrbzqk_leftCity_nr3" v-for="(item,index) in numList3" :key="index">
									<view class="zwdrbzqk_NumItem" style="width: 150rpx;">
										{{item.DrtsgdNum}}
									</view>
									<view class="zwdrbzqk_NumItem" style="width: 165rpx;" >
										{{item.DrtscsNum}}
									</view>
									<view class="zwdrbzqk_NumItem" :style="item.DrzwryRate > 0 ? 'width: 165rpx;color:#FF3B2F' : item.DrzwryRate < 0 ? 'width: 165rpx;color:#0CB480' : 'width: 165rpx;'">
										{{item.DrzwryRate}}%
									</view>
								</view>
							</view>
					</view>
				</view>
			</view>
			<!-- 市场支撑焕新 -->
			<view class="wlnltsView" style="margin-top: 30rpx;background-size: 702rpx 92%">
			 	<img src="@/static/images/AgoodStart/sczchx.png" style="margin-top: -20rpx;" class="wlnltsView_TitleTop" alt="">
					<view class="wlnltsView_nr" style="margin-top: 20rpx;">
						日装机超时工单占比
					</view>
					<view class="statisticalCycle">
						统计周期：{{pageData.EndTime}}
					</view>
					<view class="wlnltsView_nr2" :style="pageData.RjzjcsRate <= pageData.RjzjcstzRate ? 'background-color: #CEF0E6;': ''">
						<view class="tiaozhanNum">
							挑战值≤{{pageData.RjzjcstzRate}}%
						</view>
						<img src="@/static/images/AgoodStart/icon/icon4.png" class="wlnltsView_icon" alt="">
						<span class="wlnltsView_qssj">全省数据： </span>
						<span class="wlnltsView_qssjNr" :style="pageData.RjzjcsRate <= pageData.RjzjcstzRate ? 'color: #0CB480' : ''">{{pageData.RjzjcsRate}}%</span>
						<img src="@/static/images/AgoodStart/tzSuccess.png" v-if="pageData.RjzjcsRate <= pageData.RjzjcstzRate" class="success_icon" alt="">
					</view>
					<!-- 柱状图 -->
					<view style="margin: 0 24rpx;">
						<l-echart ref="chartRef3" style="width:660rpx; height:320rpx"></l-echart>
					</view>
			</view>
			<!-- 退单率 -->
			<view class="wlnltsView wlnltsViewBg2" style="background-position: 0 12rpx;margin-top: -8rpx;height: 1660rpx;">
				<view class="wlnltsView_nr bg2" style="margin-top: 16rpx;">
					退单率
				</view>
				<view class="statisticalCycle">
					统计周期：{{pageData.EndTime}}
				</view>
				<view class="TuiDanLv">
					<view class="TuiDanLv_top">
						<span class="TuiDanLv_top_title">整体退单率</span>
						<img src="@/static/images/AgoodStart/tzSuccess.png" v-if="pageData.QltdRate < pageData.QltdtzRate" class="wlnltsView_icon" alt="">
					</view>
					<view class="tiaozhanNum" style="margin-left: 60rpx;margin-top: -16rpx;">
						挑战值＜{{pageData.QltdtzRate}}%
					</view>
					<view class="TuiDanLv_bom">
						<view class="TuiDanLv_bom_left">
							<l-echart ref="chartRef4" style="width:320rpx; height:550rpx"></l-echart>
						</view>
						<view class="TuiDanLv_bom_right">
							<view class="TuiDanLv_qsData">
								<img src="@/static/images/AgoodStart/icon/qltdl.png" class="TuiDanLv_qsData_icon" alt="">
								<view class="TuiDanLv_qsData_nr">
									<view class="TuiDanLv_qsData_nr_num" :style="pageData.QltdRate < pageData.QltdtzRate ? 'color:#0CB480' : ''">
										{{pageData.QltdRate}}%
									</view>
									<view class="TuiDanLv_qsData_nr_title">
										全省数据
									</view>
								</view>
							</view>
							<view class="TuiDanLv_qsData_phb">
								
							</view>
							<view class="TuiDanLv_qsData_phb2">
								<view class="TuiDanLv_qsData_phbList" v-for="(item,index) in list1" :key="index">
									<view class="solt">
										{{index+1}}
									</view>
									<view class="cityName">
										{{item.Name}}
									</view>
									<view class="cityNum">
										{{item.Value}}%
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="TuiDanLv">
					<view class="TuiDanLv_top">
						<span class="TuiDanLv_top_title">网络原因退单率</span>
						<img src="@/static/images/AgoodStart/tzSuccess.png" v-if="pageData.WlyyRate <= pageData.WlyytzRate" class="wlnltsView_icon" alt="">
					</view>
					<view class="tiaozhanNum" style="margin-left: 60rpx;margin-top: -16rpx;">
						挑战值＜{{pageData.WlyytzRate}}%
					</view>
					<view class="TuiDanLv_bom">
						<view class="TuiDanLv_bom_left">
							<l-echart ref="chartRef5" style="width:320rpx; height:550rpx"></l-echart>
						</view>
						<view class="TuiDanLv_bom_right">
							<view class="TuiDanLv_qsData">
								<img src="@/static/images/AgoodStart/icon/diqiu.png" class="TuiDanLv_qsData_icon" alt="">
								<view class="TuiDanLv_qsData_nr">
									<view class="TuiDanLv_qsData_nr_num" :style="pageData.WlyyRate <= pageData.WlyytzRate ? 'color:#0CB480' : ''">
										{{pageData.WlyyRate}}%
									</view>
									<view class="TuiDanLv_qsData_nr_title">
										全省数据
									</view>
								</view>
							</view>
							<view class="TuiDanLv_qsData_phb">
								
							</view>
							<view class="TuiDanLv_qsData_phb2">
								<view class="TuiDanLv_qsData_phbList" v-for="(item,index) in list2" :key="index">
									<view class="solt">
										{{index+1}}
									</view>
									<view class="cityName">
										{{item.Name}}
									</view>
									<view class="cityNum">
										{{item.Value}}%
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 新装FTTR用户光纤连接率 -->
			<view class="wlnltsView" style="background-position: 0 0;margin-top: 4rpx;background-size: 702rpx 100%">
			 	<view class="wlnltsView_nr">
			 		新装FTTR用户光纤连接率
			 	</view>
				<view class="statisticalCycle">
					统计周期：{{pageData.EndTime}}  
				</view>
			 	<view class="wlnltsView_nr2" style="background-color: #CEF0E6;">
			 		<view class="tiaozhanNum">
			 			挑战值≥{{pageData.XzfttrtzRate}}%
			 		</view>
			 		<img src="@/static/images/AgoodStart/icon/icon9.png" class="wlnltsView_icon" alt="">
			 		<span class="wlnltsView_qssj">全省数据： </span>
			 		<span class="wlnltsView_qssjNr" style="color: #0CB480;">{{pageData.XzfttrRate}}%</span>
			 		<img src="@/static/images/AgoodStart/tzSuccess.png" class="success_icon" alt="">
			 	</view>
			 	<!-- 柱状图 -->
			 	<view style="margin: 0 24rpx;">
			 		<l-echart ref="chartRef7" style="width:660rpx; height:320rpx"></l-echart>
			 	</view>
			</view>
			<!-- 网络质量攻坚 -->
			<view class="wlnltsView" style="margin-top: 30rpx;background-size: 702rpx 92%">
			 	<img src="@/static/images/AgoodStart/wlzlgj.png" style="margin-top: -20rpx;" class="wlnltsView_TitleTop" alt="">
				<view class="wlnltsView_nr bg3" style="margin-top: 20rpx;">
					家宽单用户中断时长
				</view>
				<view class="statisticalCycle">
					统计周期：{{pageData.EndTime}}
				</view>
				<view class="wlnltsView_nr2" :style="pageData.JkyhzdRate <= pageData.JkyhzdtzRate ? 'background-color: #CEF0E6;': ''">
					<view class="tiaozhanNum">
						挑战值≤{{pageData.JkyhzdtzRate}}分
					</view>
					<img src="@/static/images/AgoodStart/icon/icon4.png" class="wlnltsView_icon" alt="">
					<span class="wlnltsView_qssj">全省数据： </span>
					<span class="wlnltsView_qssjNr" :style="pageData.JkyhzdRate <= pageData.JkyhzdtzRate ? 'color: #0CB480' : ''">{{pageData.JkyhzdRate}}分</span>
					<img src="@/static/images/AgoodStart/tzSuccess.png" v-if="pageData.JkyhzdRate <= pageData.JkyhzdtzRate" class="success_icon" alt="">
				</view>
				<!-- 柱状图 -->
				<view style="margin: 0 24rpx;">
					<l-echart ref="chartRef9" style="width:660rpx; height:320rpx"></l-echart>
				</view>
			</view>
			<!-- 智能组网有线上联协商速率千兆比例 -->
			<view class="wlnltsView" style="background-position: 0 0;margin-top: 4rpx;background-size: 702rpx 103%">
			 	<view class="wlnltsView_nr bg4" style="height: 120rpx;line-height: 40rpx;padding-top: 24rpx;">
					智能组网有线上联<br>
					协商速率千兆比例
			 	</view>
				<view class="statisticalCycle">
					统计周期：{{pageData.EndTime}}  
				</view>
			 	<view class="wlnltsView_nr2" :style="pageData.ZnzwyxRate >= pageData.ZnzwyxtzRate ? 'background-color: #CEF0E6;': ''">
			 		<view class="tiaozhanNum bg4">
			 			挑战值≥{{pageData.ZnzwyxtzRate}}%
			 		</view>
			 		<img src="@/static/images/AgoodStart/icon/icon5.png" class="wlnltsView_icon" alt="">
			 		<span class="wlnltsView_qssj">全省数据： </span>
			 		<span class="wlnltsView_qssjNr" :style="pageData.ZnzwyxRate >= pageData.ZnzwyxtzRate ? 'color: #0CB480' : ''">{{pageData.ZnzwyxRate}}%</span>
			 		<img src="@/static/images/AgoodStart/tzSuccess.png" v-if="pageData.ZnzwyxRate >= pageData.ZnzwyxtzRate" class="success_icon" alt="">
			 	</view>
			 	<!-- 柱状图 -->
			 	<view style="margin: 0 24rpx;">
			 		<l-echart ref="chartRef10" style="width:660rpx; height:300rpx"></l-echart>
			 	</view>
			</view>
			<!-- 家宽重复报障率(广义) -->
			<view class="wlnltsView" style="background-position: 0 0;margin-top: 4rpx;background-size: 702rpx 100%">
			 	<view class="wlnltsView_nr">
			 		家宽重复报障率(广义)
			 	</view>
				<view class="statisticalCycle">
					统计周期：{{pageData.EndTime}}
				</view>
			 	<view class="wlnltsView_nr2"  :style="pageData.JkcfbzRate < pageData.JkcfbztzRate ? 'background-color: #CEF0E6;': ''">
			 		<view class="tiaozhanNum">
			 			挑战值＜{{pageData.JkcfbztzRate}}%
			 		</view>
			 		<img src="@/static/images/AgoodStart/icon/icon12.png" class="wlnltsView_icon" alt="">
			 		<span class="wlnltsView_qssj">全省数据： </span>
			 		<span class="wlnltsView_qssjNr" :style="pageData.JkcfbzRate < pageData.JkcfbztzRate ? 'color: #0CB480' : ''">{{pageData.JkcfbzRate}}%</span>
			 		<img src="@/static/images/AgoodStart/tzSuccess.png" v-if="pageData.JkcfbzRate < pageData.JkcfbztzRate" class="success_icon" alt="">
			 	</view>
			 	<!-- 柱状图 -->
			 	<view style="margin: 0 24rpx;">
			 		<l-echart ref="chartRef11" style="width:660rpx; height:320rpx"></l-echart>
			 	</view>
			</view>
			<!-- 网络能力提升 -->
			<view class="wlnltsView"  style="margin-top: 30rpx;background-size: 702rpx 92%;">
			  	<img src="@/static/images/AgoodStart/wlnlts.png" style="margin-top: -20rpx;" class="wlnltsView_TitleTop" alt="">
			 	<view class="wlnltsView_nr" style="margin-top: 20rpx;">
			 		千兆小区升级完成率
			 	</view>
				<view class="statisticalCycle">
					统计周期：{{'1月1日' +'-'+ pageData.EndTime}}
				</view>
			 	<view class="wlnltsView_nr2" :style="pageData.QzxqsjRate >= pageData.QzxqsjtzRate ? 'background-color: #CEF0E6;': ''">
			 		<view class="tiaozhanNum">
			 			挑战值≥{{pageData.QzxqsjtzRate}}%
			 		</view>
			 		<img src="@/static/images/AgoodStart/icon/icon7.png" class="wlnltsView_icon" alt="">
			 		<span class="wlnltsView_qssj">全省数据： </span>
			 		<span class="wlnltsView_qssjNr" :style="pageData.QzxqsjRate >= pageData.QzxqsjtzRate ? 'color: #0CB480' : ''">{{pageData.QzxqsjRate}}%</span>
			 		<img src="@/static/images/AgoodStart/tzSuccess.png" v-if="pageData.QzxqsjRate > pageData.QzxqsjtzRate" class="success_icon" alt="">
			 	</view>
			 	<!-- 柱状图 -->
			 	<view style="margin: 0 24rpx;">
			 		<l-echart ref="chartRef" style="width:660rpx; height:320rpx"></l-echart>
			 	</view>
			</view>
			<!-- 端口清理完成 -->
			<view class="wlnltsView" style="background-position: 0 0;margin-top: 4rpx;background-size: 702rpx 100%;">
			 	<view class="wlnltsView_nr bg2">
			 		端口清理完成
			 	</view>
				<view class="statisticalCycle">
					统计周期：{{'1月1日' +'-'+ pageData.EndTime}}
				</view>
			 	<view class="wlnltsView_nr2" :style="pageData.DkqlRate >= pageData.DkqltzRate ? 'background-color: #CEF0E6;': ''">
			 		<view class="tiaozhanNum">
			 			挑战值≥{{pageData.DkqltzRate}}%
			 		</view>
			 		<img src="@/static/images/AgoodStart/icon/icon2.png" class="wlnltsView_icon" alt="">
			 		<span class="wlnltsView_qssj">全省数据： </span>
			 		<span class="wlnltsView_qssjNr"  :style="pageData.DkqlRate >= pageData.DkqltzRate ? 'color: #0CB480' : ''">{{pageData.DkqlRate}}%</span>
			 		<img src="@/static/images/AgoodStart/tzSuccess.png" v-if="pageData.DkqlRate > pageData.DkqltzRate" class="success_icon" alt="">
			 	</view>
			 	<!-- 柱状图 -->
			 	<view style="margin: 0 24rpx;">
			 		<l-echart ref="chartRef2" style="width:660rpx; height:320rpx"></l-echart>
			 	</view>
			</view>
			<!-- 服务质量领先 -->
			<view class="wlnltsView wlnltsViewBg2" style="margin-top: 76rpx;background-position: 0 14rpx;background-size: 702rpx 100%;height: 1660rpx;">
				<img src="@/static/images/AgoodStart/fwzllx.png" class="wlnltsView_TitleTop" style="margin-top: -68rpx;" alt="">
				<view class="wlnltsView_nr " style="margin-top: 22rpx;">
					装维工单用后即评满意度
				</view>
				<view class="statisticalCycle">
					统计周期：{{'1月1日' +'-'+ pageData.EndTime}}
				</view>
				<view class="TuiDanLv">
					<view class="TuiDanLv_top">
						<span class="TuiDanLv_top_title">装机用后即评满意度</span>
						<img src="@/static/images/AgoodStart/tzSuccess.png" v-if="pageData.ZjyhjpRate >= pageData.ZjyhjptzRate" class="wlnltsView_icon" alt="">
					</view>
					<view class="tiaozhanNum" style="margin-left: 60rpx;margin-top: -16rpx;">
						挑战值≥{{pageData.ZjyhjptzRate}}%
					</view>
					<view class="TuiDanLv_bom">
						<view class="TuiDanLv_bom_left">
							<l-echart ref="chartRef40" style="width:320rpx; height:550rpx"></l-echart>
						</view>
						<view class="TuiDanLv_bom_right">
							<view class="TuiDanLv_qsData">
								<img src="@/static/images/AgoodStart/icon/zj_myd.png" class="TuiDanLv_qsData_icon" alt="">
								<view class="TuiDanLv_qsData_nr">
									<view class="TuiDanLv_qsData_nr_num"  :style="pageData.ZjyhjpRate >= pageData.ZjyhjptzRate ? 'color: #0CB480' : ''">
										{{pageData.ZjyhjpRate}}%
									</view>
									<view class="TuiDanLv_qsData_nr_title">
										全省数据
									</view>
								</view>
							</view>
							<view class="TuiDanLv_qsData_phb">
							</view>
							<view class="TuiDanLv_qsData_phb2">
								<view class="TuiDanLv_qsData_phbList" v-for="(item,index) in list3" :key="index">
									<view class="solt">
										{{index+1}}
									</view>
									<view class="cityName">
										{{item.Name}}
									</view>
									<view class="cityNum">
										{{item.Value}}%
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="TuiDanLv">
					<view class="TuiDanLv_top">
						<span class="TuiDanLv_top_title">投诉用后即评满意度</span>
						<img src="@/static/images/AgoodStart/tzSuccess.png" v-if="pageData.TsyhjpRate >= pageData.TsyhjptzRate" class="wlnltsView_icon" alt="">
					</view>
					<view class="tiaozhanNum" style="margin-left: 60rpx;margin-top: -16rpx;">
						挑战值≥{{pageData.TsyhjptzRate}}%
					</view>
					<view class="TuiDanLv_bom">
						<view class="TuiDanLv_bom_left">
							<l-echart ref="chartRef50" style="width:320rpx; height:550rpx"></l-echart>
						</view>
						<view class="TuiDanLv_bom_right">
							<view class="TuiDanLv_qsData">
								<img src="@/static/images/AgoodStart/icon/ts_manyidu.png" class="TuiDanLv_qsData_icon" alt="">
								<view class="TuiDanLv_qsData_nr">
									<view class="TuiDanLv_qsData_nr_num" :style="pageData.TsyhjpRate >= pageData.TsyhjptzRate ? 'color: #0CB480' : ''">
										{{pageData.TsyhjpRate}}%
									</view>
									<view class="TuiDanLv_qsData_nr_title">
										全省数据
									</view>
								</view>
							</view>
							<view class="TuiDanLv_qsData_phb">
								
							</view>
							<view class="TuiDanLv_qsData_phb2">
								<view class="TuiDanLv_qsData_phbList" v-for="(item,index) in list4" :key="index">
									<view class="solt">
										{{index+1}}
									</view>
									<view class="cityName">
										{{item.Name}}
									</view>
									<view class="cityNum">
										{{item.Value}}%
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 底部logo -->
			<view class="bomIcon_view">
				<img src="@/static/images/AgoodStart/zgyd_logo2.png" class="bomIcon1" alt="">
			 	<img src="@/static/images/AgoodStart/icon/kmhztIcon.png" class="bomIcon2" alt="">
			</view>
		</view>
		<view class="content_nr" v-show="navState == 2">
			<!-- 服务质量领先 -->
			<view class="wlnltsView wlnltsViewBg3" style="margin-top: 76rpx;background-position: 0 14rpx;">
				<img src="@/static/images/AgoodStart/kmhzwztbzqk.png" class="wlnltsView_TitleTop" style="margin-top: -68rpx;" alt="">
		<!-- 		<view class="topText">
					-- 及时装，零退单 --
				</view> -->
				<view class="wlnltsView_nr bg2" style="margin-top: 22rpx;">
					累计开通情况
				</view>
				<view class="statisticalCycle">
					统计周期：{{pageData2.StartTime +'-'+ pageData2.EndTime}}
				</view>
				<view class="wlnltsView_nr2">
					<img src="@/static/images/AgoodStart/icon/icon4.png" class="wlnltsView_icon" alt="">
					<span class="wlnltsView_qssj">全省专线受理量： </span>
					<span class="wlnltsView_qssjNr">{{pageData2.ZxslNum}}</span>
				</view>
				<!-- 饼图 -->
				<view style="margin: 0 24rpx;display: flex;align-items: center;">
					<l-echart ref="chartRefZq01" style="width:480rpx; height:280rpx"></l-echart>
					<view class="echart_data" style="height: 130rpx;">
						<view style="width: 100rpx;height: 36rpx;">
							{{pageData2.ZxwcNum}}
						</view>
						<view style="width: 100rpx;height: 36rpx;">
							{{pageData2.ZxtdNum}}
						</view>
						<view style="width: 100rpx;height: 36rpx;">
							{{pageData2.ZxztNum}}
						</view>
					</view>
				</view>
				<view class="xuxian_nr">
					<view class="xuxian_nr1">
						<view class="sekuai"></view>专线开通平均时长(工作日)：<span style="color: #971AD4;font-weight: bold;">{{pageData2.Zxktpjsc}}</span> 天
					</view>
					<view class="xuxian_nr2" style="padding-bottom: 20rpx;">
						{{pageData2.Zxktdqkdp}}
					</view>
				</view>
				<!-- 堆叠图 -->
				<view style="margin: 0 24rpx;" v-if="navState == 2">
					<l-echart ref="chartRefZq02" style="width:660rpx; height:350rpx"></l-echart>
				</view>
				<view class="wlnltsView_nr2" :style="(pageData2.ZxtdRate < pageData2.ZxtdtzRate) || (pageData2.ZxtdRate == pageData2.ZxtdtzRate) ? 'background: #CEF0E6': ''">
					<img src="@/static/images/AgoodStart/icon/icon4.png" class="wlnltsView_icon" alt="">
					<span class="wlnltsView_qssj">专线退单率</span>
					<img src="@/static/images/AgoodStart/tzSuccess.png" v-if="(pageData2.ZxtdRate < pageData2.ZxtdtzRate) || (pageData2.ZxtdRate == pageData2.ZxtdtzRate)" class="success_icon" alt="">
				</view>
				<view class="wlnltsView_nr2" :style="(pageData2.ZxtdRate < pageData2.ZxtdtzRate) || (pageData2.ZxtdRate == pageData2.ZxtdtzRate) ? 'background: linear-gradient( 180deg, #CEF0E6 0%, #CEF0E6 100%);': 'background: linear-gradient( 180deg, #FFDFCD 0%, #FFDFCD 100%);'">
					<view class="tiaozhanNum" style="margin-left: 20rpx;">
						挑战值≤{{pageData2.ZxtdtzRate}}%
					</view>
					<span class="wlnltsView_qssj" style="margin-left: 40rpx;">专线退单率： </span>
					<span class="wlnltsView_qssjNr" :style="(pageData2.ZxtdRate < pageData2.ZxtdtzRate) || (pageData2.ZxtdRate == pageData2.ZxtdtzRate) ? 'color: #0CB480' : ''">{{pageData2.ZxtdRate}}%</span>
					
				</view>
				<view class="wlnltsView_nr2" :style="(pageData2.ZxwlyyRate < pageData2.ZxwlyytzRate) || (pageData2.ZxwlyyRate == pageData2.ZxwlyytzRate) ? 'background: linear-gradient( 180deg, #CEF0E6 0%, #FFFFFF 100%);margin-bottom: 20rpx;': 'background: linear-gradient( 180deg, #FFDFCD 0%, #FFFFFF 100%);margin-bottom: 20rpx;'">
					<view class="tiaozhanNum" style="margin-left: 20rpx;">
						挑战值≤{{pageData2.ZxwlyytzRate}}%
					</view>
					<span class="wlnltsView_qssj" style="margin-left: 40rpx;">网络原因退单率： </span>
					<span class="wlnltsView_qssjNr" :style="(pageData2.ZxwlyyRate < pageData2.ZxwlyytzRate) || (pageData2.ZxwlyyRate == pageData2.ZxwlyytzRate) ? 'color: #0CB480' : ''">{{pageData2.ZxwlyyRate}}%</span>
					
				</view>
				<view class="xuxian_nr2" style="margin-left: 46rpx;">
					{{pageData2.Zxtdqkdp}}
				</view>
				<!-- 柱状图 -->
				<view style="margin: 0 24rpx;" v-if="navState == 2">
					<l-echart ref="chartRefZq03" style="width:660rpx; height:320rpx"></l-echart>
				</view>
				<!-- 全省商客宽带受理量 -->
				<view class="wlnltsView_nr2">
					<img src="@/static/images/AgoodStart/icon/icon3.png" class="wlnltsView_icon" alt="">
					<span class="wlnltsView_qssj">全省商客宽带受理量： </span>
					<span class="wlnltsView_qssjNr">{{pageData2.SkkdslNum}}</span>
				</view>
				<!-- 饼图 -->
				<view style="margin: 0 24rpx;display: flex;align-items: center;">
					<l-echart ref="chartRefZq04" style="width:510rpx; height:280rpx"></l-echart>
					<view class="echart_data" style="height: 130rpx;">
						<view style="width: 100rpx;height: 36rpx;">
							{{pageData2.SkkdwcNum}}
						</view>
						<view style="width: 100rpx;height: 36rpx;">
							{{pageData2.SkkdtdNum}}
						</view>
						<view style="width: 100rpx;height: 36rpx;">
							{{pageData2.SkkdztNum}}
						</view>
					</view>
				</view>
				<!-- 堆叠图 -->
				<view style="margin: 0 24rpx;margin-top: -40rpx;" v-if="navState == 2">
					<l-echart ref="chartRefZq05" style="width:660rpx; height:350rpx"></l-echart>
				</view>
				<view class="wlnltsView_nr2" :style="(pageData2.SkkdtdRate < pageData2.SkkdtdtzRate) || (pageData2.SkkdtdRate == pageData2.SkkdtdtzRate)? 'background: #CEF0E6': ''">
					<img src="@/static/images/AgoodStart/icon/icon3.png" class="wlnltsView_icon" alt="">
					<span class="wlnltsView_qssj">商客宽带退单率</span>
					<img src="@/static/images/AgoodStart/tzSuccess.png" v-if="(pageData2.SkkdtdRate < pageData2.SkkdtdtzRate) || (pageData2.SkkdtdRate == pageData2.SkkdtdtzRate)" class="success_icon" alt="">
				</view>
				<view class="wlnltsView_nr2" :style="(pageData2.SkkdtdRate < pageData2.SkkdtdtzRate) || (pageData2.SkkdtdRate == pageData2.SkkdtdtzRate) ? 'background: linear-gradient( 180deg, #CEF0E6 0%, #CEF0E6 100%);': 'background: linear-gradient( 180deg, #FFDFCD 0%, #FFDFCD 100%);'">
					<view class="tiaozhanNum" style="margin-left: 20rpx;">
						挑战值≤{{pageData2.SkkdtdtzRate}}%
					</view>
					<span class="wlnltsView_qssj" style="margin-left: 40rpx;">全省数据： </span>
					<span class="wlnltsView_qssjNr" :style="(pageData2.SkkdtdRate < pageData2.SkkdtdtzRate) || (pageData2.SkkdtdRate == pageData2.SkkdtdtzRate) ? 'color: #0CB480' : ''">{{pageData2.SkkdtdRate}}%</span>
					
				</view>
				<view class="wlnltsView_nr2" :style="(pageData2.SkkdwlyytdRate < pageData2.SkkdwlyytzRate) || (pageData2.SkkdwlyytdRate == pageData2.SkkdwlyytzRate) ? 'background: linear-gradient( 180deg, #CEF0E6 0%, #FFFFFF 100%);margin-bottom: 20rpx;': 'background: linear-gradient( 180deg, #FFDFCD 0%, #FFFFFF 100%);margin-bottom: 20rpx;'">
					<view class="tiaozhanNum" style="margin-left: 20rpx;">
						挑战值≤{{pageData2.SkkdwlyytzRate}}%
					</view>
					<span class="wlnltsView_qssj" style="margin-left: 40rpx;">网络原因退单率： </span>
					<span class="wlnltsView_qssjNr" :style="(pageData2.SkkdwlyytdRate < pageData2.SkkdwlyytzRate) || (pageData2.SkkdwlyytdRate == pageData2.SkkdwlyytzRate) ? 'color: #0CB480' : ''">{{pageData2.SkkdwlyytdRate}}%</span>
					
				</view>
				<view class="xuxian_nr2" style="margin-left: 46rpx;">
					{{pageData2.Skkdtdqkdp}}
				</view>
				<!-- 柱状图 -->
				<view style="margin: 0 24rpx;" v-if="navState == 2">
					<l-echart ref="chartRefZq06" style="width:660rpx; height:320rpx"></l-echart>
				</view>
				<!-- 全省FTTO受理量 -->
				<view class="wlnltsView_nr2">
					<img src="@/static/images/AgoodStart/icon/icon13.png" class="wlnltsView_icon" alt="">
					<span class="wlnltsView_qssj">全省FTTO受理量：</span>
					<span class="wlnltsView_qssjNr">{{pageData2.FttoslNum}}</span>
				</view>
				<!-- 饼图 -->
				<view style="margin: 0 24rpx;display: flex;align-items: center;">
					<l-echart ref="chartRefZq07" style="width:480rpx; height:280rpx"></l-echart>
					<view class="echart_data" style="height: 130rpx;">
						<view style="width: 100rpx;height: 36rpx;">
							{{pageData2.FttowcNum}}
						</view>
						<view style="width: 100rpx;height: 36rpx;">
							{{pageData2.FttotdNum}}
						</view>
						<view style="width: 100rpx;height: 36rpx;">
							{{pageData2.FttoztNum}}
						</view>
					</view>
				</view>
				<!-- 堆叠图 -->
				<view style="margin: 0 24rpx;margin-top: -40rpx;" v-if="navState == 2">
					<l-echart ref="chartRefZq08" style="width:660rpx; height:350rpx"></l-echart>
				</view>
				<view class="wlnltsView_nr2" :style="(pageData2.FttotdRate < pageData2.FttotdtzRate) || (pageData2.FttotdRate == pageData2.FttotdtzRate) ? 'background: #CEF0E6': ''">
					<img src="@/static/images/AgoodStart/icon/icon13.png" class="wlnltsView_icon" alt="">
					<span class="wlnltsView_qssj">FTTO退单率</span>
					<img src="@/static/images/AgoodStart/tzSuccess.png" v-if="(pageData2.FttotdRate < pageData2.FttotdtzRate) || ( pageData2.FttotdRate == pageData2.FttotdtzRate)" class="success_icon" alt="">
				</view>
				<view class="wlnltsView_nr2" :style="(pageData2.FttotdRate < pageData2.FttotdtzRate) || ( pageData2.FttotdRate == pageData2.FttotdtzRate) ? 'background: linear-gradient( 180deg, #CEF0E6 0%, #CEF0E6 100%);': 'background: linear-gradient( 180deg, #FFDFCD 0%, #FFDFCD 100%);'">
					<view class="tiaozhanNum" style="margin-left: 20rpx;">
						挑战值≤{{pageData2.FttotdtzRate}}%
					</view>
					<span class="wlnltsView_qssj" style="margin-left: 40rpx;">全省数据： </span>
					<span class="wlnltsView_qssjNr" :style="(pageData2.FttotdRate < pageData2.FttotdtzRate) || (pageData2.FttotdRate == pageData2.FttotdtzRate) ? 'color: #0CB480' : ''">{{pageData2.FttotdRate}}%</span>
					
				</view>
				<view class="wlnltsView_nr2" :style="(pageData2.FttowlyytdRate < pageData2.FttowlyytzRate) || (pageData2.FttowlyytdRate == pageData2.FttowlyytzRate)  ? 'background: linear-gradient( 180deg, #CEF0E6 0%, #FFFFFF 100%);margin-bottom: 20rpx;': 'background: linear-gradient( 180deg, #FFDFCD 0%, #FFFFFF 100%);margin-bottom: 20rpx;'">
					<view class="tiaozhanNum" style="margin-left: 20rpx;">
						挑战值≤{{pageData2.FttowlyytzRate}}%
					</view>
					<span class="wlnltsView_qssj" style="margin-left: 40rpx;">网络原因退单率： </span>
					<span class="wlnltsView_qssjNr" :style="(pageData2.FttowlyytdRate < pageData2.FttowlyytzRate) || (pageData2.FttowlyytdRate == pageData2.FttowlyytzRate) ? 'color: #0CB480' : ''">{{pageData2.FttowlyytdRate}}%</span>
					
				</view>
				<view class="xuxian_nr2" style="margin-left: 46rpx;">
					{{pageData2.Fttotdqkdp}}
				</view>
				<!-- 柱状图 -->
				<view style="margin: 0 24rpx;" v-if="navState == 2">
					<l-echart ref="chartRefZq09" style="width:660rpx; height:320rpx"></l-echart>
				</view>
			</view>
			<!-- 当日开通情况 -->
			<view class="wlnltsView wlnltsViewBg3" style="background-position: 0 0;height: 100%;padding-bottom: 60rpx;">
				<view class="wlnltsView_nr bg2" >
					当日开通情况
				</view>
				<view class="statisticalCycle">
					统计周期：{{pageData2.EndTime}}
				</view>
				<view class="zwdrbzqk">
					<view class="zwdrbzqk_leftCity"  style="padding-top: 24rpx;">
						<view class="xuhao">
							01
						</view>
						<view class="zwdrbzqk_leftCity_nr" v-for="(item,index) in cityList5" :key="index">
							{{item}}
						</view>
					</view>
					<view class="zwdrbzqk_right">
							<view class="zwdrbzqk_topTitle" style="margin-top: 10rpx;">
								<view class="zwdrbzqk_leftCity_nr2" style="width: 96rpx;padding: 14rpx 0;">
									专线<br/>
									受理量
								</view>
								<view class="zwdrbzqk_leftCity_nr2" style="width: 96rpx;padding: 14rpx 0;">
									专线<br/>
									完成量
								</view>
								<view class="zwdrbzqk_leftCity_nr2" style="width: 96rpx;padding: 14rpx 0;">
									专线<br/>
									退单量
								</view>
								<view class="zwdrbzqk_leftCity_nr2" style="width: 90rpx;padding: 14rpx 0;">
									专线<br/>
									退单率
								</view>
								<view class="zwdrbzqk_leftCity_nr2" style="width: 96rpx;padding: 14rpx 0;">
									专线开通<br/>
									平均时长             
								</view>
							</view>
							<view class="zwdrbzqk_Num">
								<view class="zwdrbzqk_leftCity_nr3" v-for="(item,index) in numList5" :key="index">
									<view class="zwdrbzqk_NumItem" style="width: 96rpx;">
										{{item.DrzxslNum}}
									</view>
									<view class="zwdrbzqk_NumItem" style="width: 96rpx;">
										{{item.DrzxwcNum}}
									</view>
									<view class="zwdrbzqk_NumItem" style="width: 96rpx;">
										{{item.DrzxtdNum}}
									</view>
									<view class="zwdrbzqk_NumItem" style="width: 90rpx;">
										{{item.DrzxtdRate}}%
									</view>
									<view class="zwdrbzqk_NumItem" style="width: 96rpx;">
										{{item.Drzxktpjsc == 0 ? '-' : item.Drzxktpjsc}}
									</view>
								</view>
							</view>
					</view>
				</view>
				<view class="fengexian"></view>
				<view class="zwdrbzqk">
					<view class="zwdrbzqk_leftCity" style="padding-top: 24rpx;">
						<view class="xuhao">
							02
						</view>
						<view class="zwdrbzqk_leftCity_nr" v-for="(item,index) in cityList6" :key="index">
							{{item}}
						</view>
					</view>
					<view class="zwdrbzqk_right">
						<view class="zwdrbzqk_topTitle" style="margin-top: 10rpx;">
							<view class="zwdrbzqk_leftCity_nr2" style="width: 162rpx;padding: 14rpx 0;">
								商客宽带<br/>
								受理量
							</view>
							<view class="zwdrbzqk_leftCity_nr2" style="width: 162rpx;padding: 14rpx 0;">
								商客宽带<br/>
								退单量
							</view>
							<view class="zwdrbzqk_leftCity_nr2" style="width: 162rpx;padding: 14rpx 0;">
								商客宽带<br/>
								退单率
							</view>
						</view>
							<view class="zwdrbzqk_Num">
								<view class="zwdrbzqk_leftCity_nr3" v-for="(item,index) in numList6" :key="index">
									<view class="zwdrbzqk_NumItem" style="width: 162rpx;">
										{{item.DrskkdslNum}}
									</view>
									<view class="zwdrbzqk_NumItem" style="width: 162rpx;">
										{{item.DrskkdtdNum}}
									</view>
									<view class="zwdrbzqk_NumItem" :style="item.DrskkdtdRate > 10 || item.DrskkdtdRate == 10 ? 'width: 162rpx;color:#FF3B2F' : 'width: 162rpx;'">
										{{item.DrskkdtdRate}}%
									</view>
								</view>
							</view>
					</view>
				</view>
			</view>
			<!-- 底部logo -->
			<view class="bomIcon_view">
				<img src="@/static/images/AgoodStart/zgyd_logo2.png" class="bomIcon1" alt="">
			 	<img src="@/static/images/AgoodStart/icon/kmhztIcon.png" class="bomIcon2" alt="">
			</view>
		</view>
	</view>
</template>

<script module="echarts" lang="renderjs">
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	const lunarCalendar = require('lunar-calendar');
	export default {
		// watch: {
		//     // 监听路由变化
		//     '$route'(to, from) {
		//       if (to.path === '/pagesJK/agoodStart/index') {
		//         	this.initPage()
		//       }
		//     }
		// },
		data() {
			return {
				pageDate: '',
				pageDate2: '',
				statisticalCycleDate: '',
				statisticalCycleDate2: '',
				cityList: [],
				cityList2: [],
				cityList3: [],
				cityList4: [],
				cityList5: [],
				cityList6: [],
				numList: [],
				numList2: [],
				numList3: [],
				numList4: [],
				numList5: [],
				numList6: [],
				arr: [],
				arr2: [],
				arr3: [],
				arr4: [],
				arr5: [],
				QszjCitys: [],
				QsfttrCitys: [],
				pageData: null,
				pageData2: null,
				YDYWListName: [],
				YDYWList: [],
				YDYWList2: [],
				list1: [],
				list2: [],
				list3: [],
				list4: [],
				QzxqsjCitysName: [],
				QzxqsjCitysValue: [],
				DkqlCitysName: [],
				DkqlCitysValue: [],
				RjzjcsCitysName: [],
				RjzjcsCitysValue: [],
				QltdCitysName: [],
				QltdCitysValue: [],
				WlyyCitysName: [],
				WlyyCitysValue: [],
				XhyhecCitysName: [],
				XhyhecCitysValue: [],
				XzfttrCitysName: [],
				XzfttrCitysValue: [],
				ZglyqCitysName: [],
				ZglyqCitysValue: [],
				JkyhzdCitysName: [],
				JkyhzdCitysValue: [],
				ZnzwyxCitysName: [],
				ZnzwyxCitysValue: [],
				JkcfbzCitysName: [],
				JkcfbzCitysValue: [],
				ZjyhjpCitysName: [],
				ZjyhjpCitysValue: [],
				TsyhjpCitysName: [],
				TsyhjpCitysValue: [],
				navState: 1,
				ZxslCitys: [],
				ZxtdCitys: [],
				SkkdslCitys: [],
				SkkdtdCitys: [],
				FttoslCitys: [],
				FttotdCitys: [],
			}
		},
		mounted() {
			this.initPage()
			// 获取当前时间
			const date = new Date();
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			this.pageDate = `${year}-${month}-${day}`;
			let pagedate = lunarCalendar.solarToLunar(year, month, day)
			console.log('pagedate',pagedate)
			this.pageDate2 = pagedate.lunarFestival ? pagedate.lunarFestival : (pagedate.lunarMonthName + pagedate.lunarDayName);
			// this.statisticalCycleDate = `${this.removeLeadingZero(month)}月${1}日 - ${this.removeLeadingZero(month)}月${this.removeLeadingZero(day)}日`; 
			// this.statisticalCycleDate2 =  `${this.removeLeadingZero(month)}月${this.removeLeadingZero(day)}日`
		},
		methods: {
			openUpdatePage(){// 更新日志
				this.$router.push({
				   path:'/pagesJK/updatePage/index',
				   query:{
					   type : 2
				   }
				});
			},
			//导航切换
			onTabNav(num){
				this.navState = num
				if(num == 1){
					this.$nextTick(() => {
						this.init1()
						this.init2()
						this.init3()
						this.init4()
					})
				}else{
					this.$nextTick(() => {
						this.init5()
						this.init6()
					})
				}
			},
			removeLeadingZero(number) {
			    // 将数字转换为字符串
			    const str = number.toString();
			    // 检查字符串的第一个字符是否为 '0'
			    if (str[0] === '0' && str.length > 1) {
			        // 如果是，则移除第一个字符
			        return str.slice(1);
			    }
			    // 如果不是以 '0' 开头或是一个单独的 '0'，返回原字符串
			    return str;
			},
			initPage(){
				this.getwxxdCityData()
				this.getwxxdData()
				//tab2政企
				this.getwxxdjkData()
				this.getwxxdjkCityData()
			},
			async getwxxdData() {
				let data = await this.$api.getwxxdData();
				if (data.Code == 200) {
					let that = this
					that.pageData = data.Data
					that.arr = [
						{ value: data.Data.ZjljwcNum, name: '装机累计完成量（含FTTR）' },
						{ value: data.Data.ZjljtdNum, name: '装机累计退单量（含FTTR）' },
						{ value: data.Data.ZjzcztNum, name: '装机正常在途工单量（含FTTR）' },
						{ value: data.Data.ZjcsztNum, name: '装机超时在途工单量（含FTTR）' },
						{ value: data.Data.DsptdlNum, name: '装机待审批退单量（含FTTR）' },
					]
					that.arr2 = [
						{ value: data.Data.FttrljwcNum, name: 'FTTR累计完成量' },
						{ value: data.Data.FttrljtdNum, name: 'FTTR累计退单量' },
						{ value: data.Data.FttrzcztNum, name: 'FTTR正常在途工单量' },
						{ value: data.Data.FttrcsztNum, name: 'FTTR超时在途工单量' },
						{ value: data.Data.FttrdsptdlNum, name: 'FTTR待审批退单量' }
					]
					that.$nextTick(() => {
						setTimeout(function(){
							that.init1()
						},300)
					})
				}
			},
			async getwxxdjkData() {
				let data = await this.$api.getwxxdjkData();
				if (data.Code == 200) {
					let that = this
					that.pageData2 = data.Data
					that.arr3 = [
						{ value: data.Data.ZxwcNum, name: '专线完成量' },
						{ value: data.Data.ZxtdNum, name: '专线退单量' },
						{ value: data.Data.ZxztNum, name: '专线在途量' }
					]
					that.arr4 = [
						{ value: data.Data.SkkdwcNum, name: '商客宽带完成量' },
						{ value: data.Data.SkkdtdNum, name: '商客宽带退单量' },
						{ value: data.Data.SkkdztNum, name: '商客宽带在途量' }
					]
					that.arr5 = [
						{ value: data.Data.FttowcNum, name: 'FTTO完成量' },
						{ value: data.Data.FttotdNum, name: 'FTTO退单量' },
						{ value: data.Data.FttoztNum, name: 'FTTO在途量' }
					]
					that.$nextTick(() => {
						setTimeout(function(){
							this.init6()
						},300)
					})
				}
			},
			//移动网络表现值
			async getwxxdjkCityData() {
				let data = await this.$api.getwxxdjkCityData();
				if (data.Code == 200) {
					console.log('data.Data',data.Data)
					this.cityList5 = data.Data.DrzxCitys.map(object => object.Name);
					this.cityList6 = data.Data.DrskkdCitys.map(object => object.Name);
					//装维当日保障地市情况
					this.numList5 = data.Data.DrzxCitys
					this.numList6 = data.Data.DrskkdCitys
					
					this.ZxslCitys = data.Data.ZxslCitys 
					//处理数组数据
					data.Data.ZxtdCitys.forEach(item => {
						item.zdyData1 = item.ZxtdRate - item.ZxwlyytdRate
					})
					this.ZxtdCitys = data.Data.ZxtdCitys 
					this.SkkdslCitys = data.Data.SkkdslCitys
					//处理数组数据
					data.Data.SkkdtdCitys.forEach(item => {
						item.zdyData1 = item.SkkdtdRate - item.SkkdwlyytdRate
					})
					this.SkkdtdCitys = data.Data.SkkdtdCitys 
					this.FttoslCitys = data.Data.FttoslCitys 
					//处理数组数据
					data.Data.FttotdCitys.forEach(item => {
						item.zdyData1 = item.FttotdRate - item.FttowlyytdRate
					})
					this.FttotdCitys = data.Data.FttotdCitys 
					let that = this
					that.$nextTick(() => {
						setTimeout(function(){
							that.init5()
						},300)
					})
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 3000,
						mask: true,
					});
				}
			},
			//移动网络表现值
			async getwxxdCityData() {
				let data = await this.$api.getwxxdCityData();
				if (data.Code == 200) {
					console.log(' data.Data', data.Data)
					//千兆小区升级完成率
					this.QzxqsjCitysName = data.Data.QzxqsjCitys.map(object => object.Name);
					this.QzxqsjCitysValue = data.Data.QzxqsjCitys.map(object => object.Value);
					//端口清理完成率
					this.DkqlCitysName = data.Data.DkqlCitys.map(object => object.Name);
					this.DkqlCitysValue = data.Data.DkqlCitys.map(object => object.Value);
					//日装机超时工单占比
					this.RjzjcsCitysName = data.Data.RjzjcsCitys.map(object => object.Name);
					this.RjzjcsCitysValue = data.Data.RjzjcsCitys.map(object => object.Value);
					//整体退单率
					let arr = []
					arr.push(data.Data.QltdCitys[data.Data.QltdCitys.length -1])
					arr.push(data.Data.QltdCitys[data.Data.QltdCitys.length -2])
					arr.push(data.Data.QltdCitys[data.Data.QltdCitys.length -3])
					this.list1 = arr
					this.QltdCitysName = data.Data.QltdCitys.map(object => object.Name);
					this.QltdCitysValue = data.Data.QltdCitys.map(object => object.Value);
					//网络原因退单率
					let arr2 = []
					arr2.push(data.Data.WlyyCitys[data.Data.WlyyCitys.length -1])
					arr2.push(data.Data.WlyyCitys[data.Data.WlyyCitys.length -2])
					arr2.push(data.Data.WlyyCitys[data.Data.WlyyCitys.length -3])
					this.list2 = arr2
					this.WlyyCitysName = data.Data.WlyyCitys.map(object => object.Name);
					this.WlyyCitysValue = data.Data.WlyyCitys.map(object => object.Value);
					//销户用户二次挽留成功率
					// this.XhyhecCitysName = data.Data.XhyhecCitys.map(object => object.Name);
					// this.XhyhecCitysValue = data.Data.XhyhecCitys.map(object => object.Value);
					//新装FTTR用户光纤连接率
					this.XzfttrCitysName = data.Data.XzfttrCitys.map(object => object.Name);
					this.XzfttrCitysValue = data.Data.XzfttrCitys.map(object => object.Value);
					//自购路由器（低于wifi5）转化率
					// this.ZglyqCitysName = data.Data.ZglyqCitys.map(object => object.Name);
					// this.ZglyqCitysValue = data.Data.ZglyqCitys.map(object => object.Value);
					//家宽单用户中断时长
					this.JkyhzdCitysName = data.Data.JkyhzdCitys.map(object => object.Name);
					this.JkyhzdCitysValue = data.Data.JkyhzdCitys.map(object => object.Value);
					//智能组网有线上联协商速率千兆比例
					this.ZnzwyxCitysName = data.Data.ZnzwyxCitys.map(object => object.Name);
					this.ZnzwyxCitysValue = data.Data.ZnzwyxCitys.map(object => object.Value);
					//家宽重复报障率（广义）
					this.JkcfbzCitysName = data.Data.JkcfbzCitys.map(object => object.Name);
					this.JkcfbzCitysValue = data.Data.JkcfbzCitys.map(object => object.Value);
					//装机用后即评满意度
					let arr3 = []
					arr3.push(data.Data.ZjyhjpCitys[data.Data.ZjyhjpCitys.length -1])
					arr3.push(data.Data.ZjyhjpCitys[data.Data.ZjyhjpCitys.length -2])
					arr3.push(data.Data.ZjyhjpCitys[data.Data.ZjyhjpCitys.length -3])
					this.list3 = arr3
					this.ZjyhjpCitysName = data.Data.ZjyhjpCitys.map(object => object.Name);
					this.ZjyhjpCitysValue = data.Data.ZjyhjpCitys.map(object => object.Value);
					//投诉用后即评满意度
					let arr4 = []
					arr4.push(data.Data.TsyhjpCitys[data.Data.TsyhjpCitys.length -1])
					arr4.push(data.Data.TsyhjpCitys[data.Data.TsyhjpCitys.length -2])
					arr4.push(data.Data.TsyhjpCitys[data.Data.TsyhjpCitys.length -3])
					this.list4 = arr4
					this.TsyhjpCitysName = data.Data.TsyhjpCitys.map(object => object.Name);
					this.TsyhjpCitysValue = data.Data.TsyhjpCitys.map(object => object.Value);
					//全省装机累计受理地市
					this.QszjCitys = data.Data.QszjCitys
					//全省FTTR累计受理地市
					this.QsfttrCitys = data.Data.QsfttrCitys 
					console.log('data.Data',data.Data)
					this.cityList = data.Data.ZwdrbzCitys.map(object => object.Name);
					this.cityList2 = data.Data.ZwdrbzCitys2.map(object => object.Name);
					this.cityList3 = data.Data.ZwdrbzCitys3.map(object => object.Name);
					this.cityList4 = data.Data.SkslCitys.map(object => object.Name);
					//装维当日保障地市情况
					this.numList = data.Data.ZwdrbzCitys
					this.numList2 = data.Data.ZwdrbzCitys2
					this.numList3 = data.Data.ZwdrbzCitys3
					this.numList4 = data.Data.SkslCitys
					let that = this
					that.$nextTick(() => {
						setTimeout(function(){
							that.init2()
							that.init3()
							that.init4()
						},300)
					})
					
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 3000,
						mask: true,
					});
				}
			},
			async init1() {
				let that = this
				let option1 = {
				  tooltip: {
					trigger: 'item',
					confine: true,
					textStyle: { // 自定义 tooltip 文本样式
						fontSize: 10, // 字体大小
						fontWeight: 'bold', // 字体粗细
					},
					formatter: function (params) {
						// 根据 params 返回的数据自定义 tooltip 显示内容
						return params.name + ' : ' + params.value ;
					}
				  },
				   graphic: {
					  type: 'text',
					  left: '16%',
					  top: 'center',
					  style: {
						  text: '全省\n数据',
						  textAlign: 'center',
						  fill: '#5F6475',
						  fontSize: 12
					  }
				  },
				  legend: {
					orient: 'vertical',
					left: 105,
					top: 'center',
					itemWidth: 12, // 设置图例项的宽度为12px
					itemHeight: 12, // 设置图例项的宽度为12px
					textStyle: {        // 图例文字的样式
						color: '#000',   // 文字颜色
						fontSize: 10,    // 文字大小
						verticalAlign: 'middle', // 垂直居中对齐
						align: 'center' // 水平居中对齐
					},
				  },
				  series: [
					{
					  name: 'Access From',
					  type: 'pie',
					  center: ['20%', '50%'], // 饼图的中心位置，相对于容器的百分比
					  radius: ['32%', '55%'],
					  avoidLabelOverlap: false,
					  
					  label: {
						show: false,
						position: 'center'
					  },
					  emphasis: {
						label: {
						  show: false,
						  fontSize: 14,
						  fontWeight: 'bold'
						}
					  },
					  labelLine: {
						show: false
					  },
					  data: that.arr,
					  color: ['#0CB480','#FF3B2F','#1B9CFF','#E3BD23','#FF9507'] // 指定每个扇区的颜色
					}
				  ]
				}
				let option2 = {
				 tooltip: {
					trigger: 'item',
					confine: true,
					textStyle: { // 自定义 tooltip 文本样式
						fontSize: 10, // 字体大小
						fontWeight: 'bold', // 字体粗细
					},
					formatter: function (params) {
						// 根据 params 返回的数据自定义 tooltip 显示内容
						return params.name + ' : ' + params.value ;
					}
				 },
				 graphic: {
				  type: 'text',
				  left: '18%',
				  top: 'center',
				  style: {
					  text: '全省\n数据',
					  textAlign: 'center',
					  fill: '#5F6475',
					  fontSize: 12
				  }
				 },
				legend: {
					orient: 'vertical',
					left: 105,
					top: 'center',
					itemWidth: 12, // 设置图例项的宽度为12px
					itemHeight: 12, // 设置图例项的宽度为12px
					textStyle: {        // 图例文字的样式
						color: '#000',   // 文字颜色
						fontSize: 10,    // 文字大小
						verticalAlign: 'middle', // 垂直居中对齐
						align: 'center' // 水平居中对齐
					},
				},
				  series: [
					{
					  name: 'Access From',
					  type: 'pie',
					  center: ['23%', '50%'], // 饼图的中心位置，相对于容器的百分比
					  radius: ['32%', '55%'],
					  avoidLabelOverlap: false,
					  
					  label: {
						show: false,
						position: 'center'
					  },
					  emphasis: {
						label: {
						  show: false,
						  fontSize: 14,
						  fontWeight: 'bold'
						}
					  },
					  labelLine: {
						show: false
					  },
					  data: that.arr2,
					  color: ['#0CB480','#FF3B2F','#1B9CFF','#E3BD23','#FF9507'] // 指定每个扇区的颜色
					}
				  ]
				}
				const chart1 = await that.$refs.chartRef01.init(echarts)
				chart1.setOption(option1)
				const chart2 = await that.$refs.chartRef02.init(echarts)
				chart2.setOption(option2)
			},
			async init2() {
				let that = this
				let option1 = {
					grid: {
						top: '20rpx',
						left: '50rpx',
						right: '20rpx'
					},
					tooltip: {
						trigger: 'item',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						show: true,
						showDelay:100,
						backgroundColor: '#656565', // 背景颜色改为黑色
						formatter: function (params) {
							// 根据 params 返回的数据自定义 tooltip 显示内容
							return params.name + ' : ' + params.value + '%';
						}
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: that.QzxqsjCitysName,
						axisLabel: {
							interval: 0,
							fontSize: 10, // 设置字体大小
							color:'#5F6475',
							formatter: function (value) {
								return value.split("").join("\n") //垂直显示
							},
						}
					},
					yAxis: {
						axisLabel: {
							color: '#5C5C5C', // 设置标签颜色
						},
						type: 'value',
						axisLine: {
							show: true, // 显示y轴
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						},
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						}
					},
					series: [
						{
							data: that.QzxqsjCitysValue,
							barCategoryGap: '100',
							type: 'bar',
							name: '千兆小区升级完成率',
							itemStyle: {
								color: function(params) {
									// 如果数据值大于，则柱子颜色为绿色
									if (params.value >= that.pageData.QzxqsjtzRate) {
										return '#0CB480';
									}
									// 其他情况使用默认颜色
									return '#FF3B2F';
								},
								borderRadius: 4,
								borderWidth: 0
							},
							markLine: {
								data: [{
									type: 'line',
									name: '挑战值',
									yAxis: that.pageData.QzxqsjtzRate,
									lineStyle: {
										color: '#FF0000',
										type: 'dashed'
									},
									label: {
										show: false // 不显示标签
									},
									 
								}],
								symbol: ['none', 'none'] 
							},
							barWidth: 5
						}
					]
				}
				let option2 = {
					grid: {
						top: '20rpx',
						left: '50rpx',
						right: '20rpx'
					},
					tooltip: {
						trigger: 'item',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						show: true,
						showDelay:100,
						backgroundColor: '#656565', // 背景颜色改为黑色
						formatter: function (params) {
							// 根据 params 返回的数据自定义 tooltip 显示内容
							return params.name + ' : ' + params.value + '%';
						}
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: that.DkqlCitysName,
						axisLabel: {
							interval: 0,
							fontSize: 10, // 设置字体大小
							color:'#5F6475',
							formatter: function (value) {
								return value.split("").join("\n") //垂直显示
							},
						}
					},
					yAxis: {
						axisLabel: {
							color: '#5C5C5C', // 设置标签颜色
						},
						type: 'value',
						max: 100,
						axisLine: {
							show: true, // 显示y轴
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						},
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						}
					},
					series: [
						{
							data: that.DkqlCitysValue,
							barCategoryGap: '1',
							type: 'bar',
							name: '端口清理完成',
							itemStyle: {
								color: function(params) {
									// 如果数据值大于，则柱子颜色为绿色
									if (params.value > that.pageData.DkqltzRate) {
										return '#0CB480';
									}
									// 其他情况使用默认颜色
									return '#FF3B2F';
								},
								borderRadius: 4,
								borderWidth: 0
							},
							markLine: {
								data: [{
									type: 'line',
									name: '挑战值',
									yAxis: that.pageData.DkqltzRate,
									lineStyle: {
										color: '#FF0000',
										type: 'dashed'
									},
									label: {
										show: false // 不显示标签
									}
								}],
								symbol: ['none', 'none'] 
							},
							barWidth: 5
						}
					]
				}
				let option3 = {
					grid: {
						top: '20rpx',
						left: '50rpx',
						right: '20rpx'
					},
					tooltip: {
						trigger: 'item',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						show: true,
						showDelay:100,
						backgroundColor: '#656565', // 背景颜色改为黑色
						formatter: function (params) {
							// 根据 params 返回的数据自定义 tooltip 显示内容
							return params.name + ' : ' + params.value + '%';
						}
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: that.RjzjcsCitysName,
						axisLabel: {
							interval: 0,
							fontSize: 10, // 设置字体大小
							color:'#5F6475',
							formatter: function (value) {
								return value.split("").join("\n") //垂直显示
							},
						}
					},
					yAxis: {
						axisLabel: {
							color: '#5C5C5C', // 设置标签颜色
						},
						type: 'value',
						// max: that.pageData.DkqltzRate, // 设置Y轴的最大值为1
						axisLine: {
							show: true, // 显示y轴
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						},
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						}
					},
					series: [
						{
							data: that.RjzjcsCitysValue,
							barCategoryGap: '100',
							type: 'bar',
							name: '日装机超时工单占比',
							itemStyle: {
								color: function(params) {
									// 如果数据值大于，则柱子颜色为绿色
									if (params.value <= that.pageData.RjzjcstzRate) {
										return '#0CB480';
									}
									// 其他情况使用默认颜色
									return '#FF3B2F';
								},
								borderRadius: 4,
								borderWidth: 0
							},
							markLine: {
								data: [{
									type: 'line',
									name: '挑战值',
									yAxis: that.pageData.RjzjcstzRate,
									lineStyle: {
										color: '#FF0000',
										type: 'dashed'
									},
									label: {
										show: false // 不显示标签
									}
								}],
								symbol: ['none', 'none'] 
							},
							barWidth: 5
						}
					]
				}
				let option4 = {
					grid: {
						top: '20rpx',
						left: '50rpx',
						right: '20rpx'
					},
					tooltip: {
						trigger: 'item',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						show: true,
						showDelay:100,
						backgroundColor: '#656565', // 背景颜色改为黑色
						formatter: function (params) {
							// 根据 params 返回的数据自定义 tooltip 显示内容
							return params.name + ' : ' + params.value + '%';
						}
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: that.XzfttrCitysName,
						axisLabel: {
							interval: 0,
							fontSize: 10, // 设置字体大小
							color:'#5F6475',
							formatter: function (value) {
								return value.split("").join("\n") //垂直显示
							},
						}
					},
					yAxis: {
						axisLabel: {
							color: '#5C5C5C', // 设置标签颜色
						},
						type: 'value',
						// max: that.pageData.DkqltzRate, // 设置Y轴的最大值为1
						axisLine: {
							show: true, // 显示y轴
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						},
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						}
					},
					series: [
						{
							data: that.XzfttrCitysValue,
							barCategoryGap: '100',
							type: 'bar',
							name: '新装FTTR用户光纤连接率',
							itemStyle: {
								color: function(params) {
									// 如果数据值大于，则柱子颜色为绿色
									if (params.value >= that.pageData.XzfttrtzRate) {
										return '#0CB480';
									}
									// 其他情况使用默认颜色
									return '#FF3B2F';
								},
								borderRadius: 4,
								borderWidth: 0
							},
							markLine: {
								data: [{
									type: 'line',
									name: '挑战值',
									yAxis: that.pageData.XzfttrtzRate,
									lineStyle: {
										color: '#FF0000',
										type: 'dashed'
									},
									label: {
										show: false // 不显示标签
									}
								}],
								symbol: ['none', 'none'] 
							},
							barWidth: 5
						}
					]
				}
				let option5 = {
					grid: {
						top: '20rpx',
						left: '50rpx',
						right: '20rpx'
					},
					tooltip: {
						trigger: 'item',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						show: true,
						showDelay:100,
						backgroundColor: '#656565', // 背景颜色改为黑色
						formatter: function (params) {
							// 根据 params 返回的数据自定义 tooltip 显示内容
							return params.name + ' : ' + params.value + '分';
						}
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: that.JkyhzdCitysName,
						axisLabel: {
							interval: 0,
							fontSize: 10 , // 设置字体大小
							color:'#5F6475',
							formatter: function (value) {
								return value.split("").join("\n") //垂直显示
							},
						}
					},
					yAxis: {
						axisLabel: {
							color: '#5C5C5C', // 设置标签颜色
						},
						type: 'value',
						// max: that.pageData.DkqltzRate, // 设置Y轴的最大值为1
						axisLine: {
							show: true, // 显示y轴
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						},
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						}
					},
					series: [
						{
							data: that.JkyhzdCitysValue,
							barCategoryGap: '100',
							type: 'bar',
							name: '家宽单用户中断时长',
							itemStyle: {
								color: function(params) {
									// 如果数据值大于，则柱子颜色为绿色
									if (params.value <= that.pageData.JkyhzdtzRate) {
										return '#0CB480';
									}
									// 其他情况使用默认颜色
									return '#FF3B2F';
								},
								borderRadius: 4,
								borderWidth: 0
							},
							markLine: {
								data: [{
									type: 'line',
									name: '挑战值',
									yAxis: that.pageData.JkyhzdtzRate,
									lineStyle: {
										color: '#FF0000',
										type: 'dashed'
									},
									label: {
										show: false // 不显示标签
									}
								}],
								symbol: ['none', 'none'] 
							},
							barWidth: 5
						}
					]
				}
				let option6 = {
					grid: {
						top: '20rpx',
						left: '50rpx',
						right: '20rpx'
					},
					tooltip: {
						trigger: 'item',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						show: true,
						showDelay:100,
						backgroundColor: '#656565', // 背景颜色改为黑色
						formatter: function (params) {
							// 根据 params 返回的数据自定义 tooltip 显示内容
							return  params.name + ' : ' + params.value + '%';
						}
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: that.ZnzwyxCitysName,
						axisLabel: {
							interval: 0,
							fontSize: 10, // 设置字体大小
							color:'#5F6475',
							formatter: function (value) {
								return value.split("").join("\n") //垂直显示
							},
						}
					},
					yAxis: {
						axisLabel: {
							color: '#5C5C5C', // 设置标签颜色
						},
						type: 'value',
						// max: that.pageData.DkqltzRate, // 设置Y轴的最大值为1
						axisLine: {
							show: true, // 显示y轴
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						},
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						}
					},
					series: [
						{
							data: that.ZnzwyxCitysValue,
							barCategoryGap: '100',
							type: 'bar',
							name: '智能组网有线上联协商速率千兆比例',
							itemStyle: {
								color: function(params) {
									// 如果数据值大于，则柱子颜色为绿色
									if (params.value >= that.pageData.ZnzwyxtzRate) {
										return '#0CB480';
									}
									// 其他情况使用默认颜色
									return '#FF3B2F';
								},
								borderRadius: 4,
								borderWidth: 0
							},
							markLine: {
								data: [{
									type: 'line',
									name: '挑战值',
									yAxis: that.pageData.ZnzwyxtzRate,
									lineStyle: {
										color: '#FF0000',
										type: 'dashed'
									},
									label: {
										show: false // 不显示标签
									}
								}],
								symbol: ['none', 'none'] 
							},
							barWidth: 5
						}
					]
				}
				let option7 = {
					grid: {
						top: '20rpx',
						left: '50rpx',
						right: '20rpx'
					},
					tooltip: {
						trigger: 'item',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						show: true,
						showDelay:100,
						backgroundColor: '#656565', // 背景颜色改为黑色
						formatter: function (params) {
							// 根据 params 返回的数据自定义 tooltip 显示内容
							return params.name + ' : ' + params.value + '%';
						}
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: that.JkcfbzCitysName,
						axisLabel: {
							interval: 0,
							fontSize: 10, // 设置字体大小
							color:'#5F6475',
							formatter: function (value) {
								return value.split("").join("\n") //垂直显示
							},
						}
					},
					yAxis: {
						axisLabel: {
							color: '#5C5C5C', // 设置标签颜色
						},
						type: 'value',
						// max: that.pageData.DkqltzRate, // 设置Y轴的最大值为1
						axisLine: {
							show: true, // 显示y轴
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						},
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						}
					},
					series: [
						{
							data: that.JkcfbzCitysValue,
							barCategoryGap: '100',
							type: 'bar',
							name: '家宽重复报障率（广义）',
							itemStyle: {
								color: function(params) {
									// 如果数据值大于，则柱子颜色为绿色
									if (params.value < that.pageData.JkcfbztzRate) {
										return '#0CB480';
									}
									// 其他情况使用默认颜色
									return '#FF3B2F';
								},
								borderRadius: 4,
								borderWidth: 0
							},
							markLine: {
								data: [{
									type: 'line',
									name: '挑战值',
									yAxis: that.pageData.JkcfbztzRate,
									lineStyle: {
										color: '#FF0000',
										type: 'dashed'
									},
									label: {
										show: false // 不显示标签
									}
								}],
								symbol: ['none', 'none'] 
							},
							barWidth: 5
						}
					]
				}
				const chart1 = await that.$refs.chartRef.init(echarts)
				chart1.setOption(option1)
				const chart2 = await that.$refs.chartRef2.init(echarts)
				chart2.setOption(option2)
				const chart3 = await that.$refs.chartRef3.init(echarts)
				chart3.setOption(option3)
				
				// const chart4 = await that.$refs.chartRef6.init(echarts)
				// chart4.setOption(option1)
				const chart5 = await that.$refs.chartRef7.init(echarts)
				chart5.setOption(option4)
				// const chart6 = await that.$refs.chartRef8.init(echarts)
				// chart6.setOption(option1)
				
				const chart7 = await that.$refs.chartRef9.init(echarts)
				chart7.setOption(option5)
				const chart8 = await that.$refs.chartRef10.init(echarts)
				chart8.setOption(option6)
				const chart9 = await that.$refs.chartRef11.init(echarts)
				chart9.setOption(option7)
			},
			async init3() {
				let that = this
				let option1 = {
					grid: {
						top: '5px',
						left: '55px',
						right: '10px',
						bottom: '20px'
					},
					tooltip: {
						trigger: 'item',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						show: true,
						showDelay:100,
						backgroundColor: '#656565', // 背景颜色改为黑色
						formatter: function (params) {
							// 根据 params 返回的数据自定义 tooltip 显示内容
							return params.name + ' : ' + params.value + '%';
						}
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'value'
					},
					yAxis: {
						axisLabel: {
							color: '#5C5C5C', // 设置标签颜色
						},
						type: 'category',
						data: that.QltdCitysName,
						axisLine: {
							show: true, // 显示y轴
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						},
						axisLabel: {
							interval: 0,
							fontSize: 10, // 设置字体大小
							color:'#5F6475'
						},
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						}
					},
					series: [
						{
							data: that.QltdCitysValue,
							barCategoryGap: '100',
							type: 'bar',
							name: '整体退单率',
							itemStyle: {
								color: function(params) {
									// 如果数据值大于80，则柱子颜色为绿色
									if (params.value < that.pageData.QltdtzRate) {
										return '#0CB480';
									}
									// 其他情况使用默认颜色
									return '#FF3B2F';
								},
								borderRadius: 4,
								borderWidth: 0
							},
							markLine: {
								data: [{
									type: 'line',
									name: '挑战值',
									xAxis: that.pageData.QltdtzRate,
									lineStyle: {
										color: '#FF0000',
										type: 'dashed'
									},
									label: {
										show: false // 不显示标签
									},
								}],
								 symbol: ['none', 'none'] 
							},
							barWidth: 5
						}
					]
				}
				let option2 = {
					grid: {
						top: '5px',
						left: '55px',
						right: '10px',
						bottom: '20px'
					},
					tooltip: {
						trigger: 'item',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						show: true,
						showDelay:100,
						backgroundColor: '#656565', // 背景颜色改为黑色
						formatter: function (params) {
							// 根据 params 返回的数据自定义 tooltip 显示内容
							return params.name + ' : ' + params.value + '%';
						}
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'value'
					},
					yAxis: {
						axisLabel: {
							color: '#5C5C5C', // 设置标签颜色
						},
						type: 'category',
						data: that.WlyyCitysName,
						axisLine: {
							show: true, // 显示y轴
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						},
						axisLabel: {
							interval: 0,
							fontSize: 10, // 设置字体大小
							color:'#5F6475'
						},
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						}
					},
					series: [
						{
							data: that.WlyyCitysValue,
							barCategoryGap: '100',
							type: 'bar',
							name: '网络原因退单率',
							itemStyle: {
								color: function(params) {
									// 如果数据值大于80，则柱子颜色为绿色
									if (params.value <= that.pageData.WlyytzRate) {
										return '#0CB480';
									}
									// 其他情况使用默认颜色
									return '#FF3B2F';
								},
								borderRadius: 4,
								borderWidth: 0
							},
							markLine: {
								data: [{
									type: 'line',
									name: '挑战值',
									xAxis: that.pageData.WlyytzRate,
									lineStyle: {
										color: '#FF0000',
										type: 'dashed'
									},
									label: {
										show: false // 不显示标签
									}
								}],
								symbol: ['none', 'none'] 
							},
							barWidth: 5
						}
					]
				}
				let option3 = {
					grid: {
						top: '5px',
						left: '55px',
						right: '10px',
						bottom: '20px'
					},
					tooltip: {
						trigger: 'item',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						show: true,
						showDelay:100,
						backgroundColor: '#656565', // 背景颜色改为黑色
						formatter: function (params) {
							// 根据 params 返回的数据自定义 tooltip 显示内容
							return params.name + ' : ' + params.value + '%';
						}
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'value'
					},
					yAxis: {
						axisLabel: {
							color: '#5C5C5C', // 设置标签颜色
						},
						type: 'category',
						data: that.ZjyhjpCitysName,
						axisLine: {
							show: true, // 显示y轴
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						},
						axisLabel: {
							interval: 0,
							fontSize: 10, // 设置字体大小
							color:'#5F6475',
						},
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						}
					},
					series: [
						{
							data: that.ZjyhjpCitysValue,
							barCategoryGap: '100',
							type: 'bar',
							name: '装机用后即评满意度',
							itemStyle: {
								color: function(params) {
									// 如果数据值大于80，则柱子颜色为绿色
									if (params.value >= that.pageData.ZjyhjptzRate) {
										return '#0CB480';
									}
									// 其他情况使用默认颜色
									return '#FF3B2F';
								},
								borderRadius: 4,
								borderWidth: 0
							},
							markLine: {
								data: [{
									type: 'line',
									name: '挑战值',
									xAxis: that.pageData.ZjyhjptzRate,
									lineStyle: {
										color: '#FF0000',
										type: 'dashed'
									},
									label: {
										show: false // 不显示标签
									}
								}],
								symbol: ['none', 'none'] 
							},
							barWidth: 5
						}
					]
				}
				let option4 = {
					grid: {
						top: '5px',
						left: '55px',
						right: '10px',
						bottom: '20px'
					},
					tooltip: {
						trigger: 'item',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						show: true,
						showDelay:100,
						backgroundColor: '#656565', // 背景颜色改为黑色
						formatter: function (params) {
							// 根据 params 返回的数据自定义 tooltip 显示内容
							return  params.name + ':' + params.value + '%';
						}
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						},
						
						axisTick: {
							show: false
						},
						type: 'value'
					},
					yAxis: {
						axisLabel: {
							color: '#5C5C5C', // 设置标签颜色
						},
						type: 'category',
						data: that.TsyhjpCitysName,
						axisLine: {
							show: true, // 显示y轴
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						},
						axisLabel: {
							interval: 0,
							fontSize: 10, // 设置字体大小
							color:'#5F6475',
						},
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						}
					},
					series: [
						{
							data: that.TsyhjpCitysValue,
							barCategoryGap: '100',
							type: 'bar',
							name: '投诉用后即评满意度',
							itemStyle: {
								color: function(params) {
									// 如果数据值大于80，则柱子颜色为绿色
									if (params.value >= that.pageData.TsyhjptzRate) {
										return '#0CB480';
									}
									// 其他情况使用默认颜色
									return '#FF3B2F';
								},
								borderRadius: 4,
								borderWidth: 0
							},
							markLine: {
								data: [{
									type: 'line',
									name: '挑战值',
									xAxis: that.pageData.TsyhjptzRate,
									lineStyle: {
										color: '#FF0000',
										type: 'dashed'
									},
									label: {
										show: false // 不显示标签
									}
								}],
								symbol: ['none', 'none'] 
							},
							barWidth: 5
						}
					]
				}
				const chart1 = await that.$refs.chartRef4.init(echarts)
				chart1.setOption(option1)
				const chart2 = await that.$refs.chartRef5.init(echarts)
				chart2.setOption(option2)
				const chart3 = await that.$refs.chartRef40.init(echarts)
				chart3.setOption(option3)
				const chart4 = await that.$refs.chartRef50.init(echarts)
				chart4.setOption(option4)
			},
			async init4() {
				let option1 = {
					grid: {
						top: '20rpx',
						bottom: '65rpx',
						left: '50rpx'
					},
					tooltip: {
						trigger: 'item',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						show: true,
						show: true,
						showDelay:100,
						backgroundColor: '#656565', // 背景颜色改为黑色
						formatter: params => {
							return (
								params.name +
								'\n' +
								'装机累计受理量: ' +
								this.QszjCitys.map(item => item.ZjljslNum)[params.dataIndex] +
							
								'\n' +
								'装机累计完成量(含FTTR): ' +
								this.QszjCitys.map(item => item.ZjljwcNum)[params.dataIndex] +
							
								'\n' +
								'装机累计退单量(含FTTR): ' +
								this.QszjCitys.map(item => item.ZjljtdNum)[params.dataIndex] +
							
								'\n' +
								'装机正常在途工单量(含FTTR): ' +
								this.QszjCitys.map(item => item.ZjzcztNum)[params.dataIndex] +
							
								'\n' +
								'装机超时在途工单量(含FTTR): ' +
								this.QszjCitys.map(item => item.ZjcsztNum)[params.dataIndex] +
							
								'\n' +
								'装机待审批退单量(含FTTR): ' +
								this.QszjCitys.map(item => item.DsptdlNum)[params.dataIndex] 
							
							)
						}
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#A4A8B7', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: this.QszjCitys.map(item => item.Name),
						axisLabel: {
							interval: 0,
							fontSize: 10, // 设置字体大小
							color:'#5F6475',
							formatter: function (value) {
								return value.split("").join("\n") //垂直显示
							},
						}
					},
					yAxis: [{
						axisLabel: {
							color: '#A7ABBB', // 设置标签颜色
							fontSize: 10, // 设置字体大小
						},
						type: 'value',
					}], 
					series: [
						{
							data: this.QszjCitys.map(item => item.DsptdlNum),
							type: 'bar',
							name: '装机待审批退单量(含FTTR)',
							stack: '总和',
							itemStyle: {
								color: '#FF9507',
							},
							barWidth: 6,
						},
						{
							data: this.QszjCitys.map(item => (item.DsptdlNum !== 0 ? item.ZjcsztNum/100 : 0)),
							type: 'bar',
							name: '',
							stack: '总和',
							itemStyle: {
								color: '#fff',
							},
							barWidth: 6,
						},
						{
							data: this.QszjCitys.map(item => item.ZjcsztNum),
							type: 'bar',
							name: '装机超时在途工单量(含FTTR)',
							stack: '总和',
							itemStyle: {
								color: '#E3BD23',
							},
							barWidth: 6,
						},
						{
							data: this.QszjCitys.map(item => (item.ZjcsztNum !== 0 ? item.ZjcsztNum/100 : 0)),
							type: 'bar',
							name: '',
							stack: '总和',
							itemStyle: {
								color: '#fff',
								borderWidth: 0
							},
							barWidth: 6,
						},
						{
							data: this.QszjCitys.map(item => item.ZjzcztNum),
							type: 'bar',
							name: '装机正常在途工单量(含FTTR)',
							stack: '总和',
							itemStyle: {
								color: '#1B9CFF',
							},
							barWidth: 6,
						},
						{
							data: this.QszjCitys.map(item => (item.ZjzcztNum !== 0 ? item.ZjcsztNum/100 : 0)),
							type: 'bar',
							name: '',
							stack: '总和',
							itemStyle: {
								color: '#fff',
							},
							barWidth: 6,
						},
						{
							data: this.QszjCitys.map(item => item.ZjljtdNum),
							type: 'bar',
							name: '装机累计退单量(含FTTR)',
							stack: '总和',
							itemStyle: {
								color: '#FF3B2F',
							},
							barWidth: 6,
						},
						{
							data: this.QszjCitys.map(item => (item.ZjljtdNum !== 0 ? item.ZjcsztNum/100 : 0)),
							type: 'bar',
							name: '',
							stack: '总和',
							itemStyle: {
								color: '#fff',
							},
							barWidth: 6,
						},
						{
							data: this.QszjCitys.map(item => item.ZjljwcNum),
							type: 'bar',
							name: '装机累计完成量(含FTTR)',
							stack: '总和',
							itemStyle: {
								color: '#0CB480',
							},
							barWidth: 6,
						}
					]
				};
				let option2 = {
					grid: {
						top: '20rpx',
						bottom: '45rpx',
						left: '50rpx'
					},
					tooltip: {
						trigger: 'item',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						show: true,
						showDelay:100,
						backgroundColor: '#656565', // 背景颜色改为黑色
						formatter: params => {
							return (
								params.name +
								'\n' +
								'FTTR累计受理量: ' +
								this.QsfttrCitys.map(item => item.FttrljslNum)[params.dataIndex] +
							
								'\n' +
								'FTTR累计完成量: ' +
								this.QsfttrCitys.map(item => item.FttrljwcNum)[params.dataIndex] +
								
								'\n' +
								'FTTR累计退单量: ' +
								this.QsfttrCitys.map(item => item.FttrljtdNum)[params.dataIndex] +
							
								'\n' +
								'FTTR正常在途工单量: ' +
								this.QsfttrCitys.map(item => item.FttrzcztNum)[params.dataIndex] +
								
								'\n' +
								'FTTR超时在途工单量: ' +
								this.QsfttrCitys.map(item => item.FttrcsztNum)[params.dataIndex] +
								
								'\n' +
								'FTTR待审批退单量: ' +
								this.QsfttrCitys.map(item => item.FttrdsptdlNum)[params.dataIndex]
							
							)
						}
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#A4A8B7', // 线条颜色
								fontSize: 10, // 设置字体大小
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: this.QsfttrCitys.map(item => item.Name),
						axisLabel: {
							interval: 0,
							fontSize: 10, // 设置字体大小
							color:'#5F6475',
							formatter: function (value) {
								return value.split("").join("\n") //垂直显示
							},
						}
					},
					yAxis: [{
						axisLabel: {
							color: '#A7ABBB', // 设置标签颜色
							fontSize: 10, // 设置字体大小
						},
						type: 'value',
					}],
					series: [
						{
							data: this.QsfttrCitys.map(item => item.FttrdsptdlNum),
							type: 'bar',
							name: 'FTTR待审批退单量',
							stack: '总和',
							itemStyle: {
								color: '#FF9507',
							},
							barWidth: 6,
						},
						{
							data: this.QsfttrCitys.map(item => (item.FttrdsptdlNum != 0 ? item.FttrljslNum/100 : 0)),
							type: 'bar',
							name: '',
							stack: '总和',
							itemStyle: {
								color: '#fff',
							},
							barWidth: 6,
						},
						{
							data: this.QsfttrCitys.map(item => item.FttrcsztNum),
							type: 'bar',
							name: 'FTTR超时在途工单量',
							stack: '总和',
							itemStyle: {
								color: '#E3BD23',
							},
							barWidth: 6,
						},
						{
							data: this.QsfttrCitys.map(item => (item.FttrcsztNum != 0 ?  item.FttrljslNum/100 : 0)),
							type: 'bar',
							name: '',
							stack: '总和',
							itemStyle: {
								color: '#fff',
								borderWidth: 0
							},
							barWidth: 6,
						},
						{
							data: this.QsfttrCitys.map(item => item.FttrzcztNum),
							type: 'bar',
							name: 'FTTR正常在途工单量',
							stack: '总和',
							itemStyle: {
								color: '#1B9CFF',
							},
							barWidth: 6,
						},
						{
							data: this.QsfttrCitys.map(item => (item.FttrzcztNum != 0 ? item.FttrljslNum/100 : 0)),
							type: 'bar',
							name: '',
							stack: '总和',
							itemStyle: {
								color: '#fff',
							},
							barWidth: 6,
						},
						{
							data: this.QsfttrCitys.map(item => item.FttrljtdNum),
							type: 'bar',
							name: 'FTTR累计退单量',
							stack: '总和',
							itemStyle: {
								color: '#FF3B2F',
							},
							barWidth: 6,
						},
						{
							data: this.QsfttrCitys.map(item => (item.FttrljtdNum != 0 ? item.FttrljslNum/100 : 0)),
							type: 'bar',
							name: '',
							stack: '总和',
							itemStyle: {
								color: '#fff',
							},
							barWidth: 6,
						},
						{
							data: this.QsfttrCitys.map(item => item.FttrljwcNum),
							type: 'bar',
							name: 'FTTR累计完成量',
							stack: '总和',
							itemStyle: {
								color: '#0CB480',
							},
							barWidth: 6,
						}
					]
				};
				const chart1 = await this.$refs.chartRefDD.init(echarts)
				chart1.setOption(option1);
				const chart2 = await this.$refs.chartRefDD2.init(echarts)
				chart2.setOption(option2);
			},
			async init5() {
				let that = this
				let option2 = {
					grid: {
						top: '20rpx',
						bottom: '45rpx',
						left: '50rpx'
					},
					tooltip: {
						trigger: 'item',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						show: true,
						showDelay:100,
						backgroundColor: '#656565', // 背景颜色改为黑色
						formatter: params => {
							return (
								params.name +
								'\n' +
								'专线受理量: ' +
								that.ZxslCitys.map(item => item.ZxslNum)[params.dataIndex] +
							
								'\n' +
								'专线完成量: ' +
								that.ZxslCitys.map(item => item.ZxwcNum)[params.dataIndex] +
								
								'\n' +
								'专线退单量: ' +
								that.ZxslCitys.map(item => item.ZxtdNum)[params.dataIndex] +
							
								'\n' +
								'专线在途量: ' +
								that.ZxslCitys.map(item => item.ZxztNum)[params.dataIndex] +
								
								'\n' +
								'专线开通平均时长: ' +
								that.ZxslCitys.map(item => item.Zxktpjsc)[params.dataIndex]
							
							)
						}
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#A4A8B7', // 线条颜色
								fontSize: 10, // 设置字体大小
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: that.ZxslCitys.map(item => item.Name),
						axisLabel: {
							interval: 0,
							fontSize: 10, // 设置字体大小
							color:'#5F6475',
							formatter: function (value) {
								return value.split("").join("\n") //垂直显示
							},
						}
					},
					yAxis: [{
						axisLabel: {
							color: '#A7ABBB', // 设置标签颜色
							fontSize: 10, // 设置字体大小
						},
						type: 'value',
					},
					{
					     type: 'value',
					     position: 'right', // 明确指定为右侧 Y 轴
					     axisLabel: {
					       fontSize: 10,
					       color: '#707070',
					       formatter: value => `${value}` // 取整并显示百分比
					     },
						  axisLine: { show: false ,// 隐藏第二条y轴的轴线 
						  }, 
						  axisTick: { show: false ,// 隐藏第二条y轴的刻度线 
						  },
						   splitLine: { show: false ,// 隐藏第二条y轴的分割线 
						   }
					   }
					],
					series: [
						{
							data: that.ZxslCitys.map(item => item.Zxktpjsc),
							type: 'line',
							name: '专线开通平均时长',
							stack: '总和',
							itemStyle: {
								color: '#971AD4'
							},
							barWidth: 6,
							yAxisIndex: 1,
						},
						
						{
							data: that.ZxslCitys.map(item => (item.ZxztNum < 20 && item.ZxztNum > 0 ? 20 : item.ZxztNum == 0 ? 0 : item.ZxztNum)),
							type: 'bar',
							name: '专线在途量',
							stack: '总和',
							itemStyle: {
								color: '#1B9CFF',
							},
							barWidth: 6,
							yAxisIndex: 0,
						},
						{
							data: that.ZxslCitys.map(item => (item.ZxtdNum != 0 ? item.ZxslNum/100 : 0)),
							type: 'bar',
							name: '',
							stack: '总和',
							itemStyle: {
								color: '#fff',
							},
							barWidth: 6,
						},
						{
							data: that.ZxslCitys.map(item => (item.ZxtdNum < 20 && item.ZxtdNum > 0 ? 20 : item.ZxtdNum == 0 ? 0 : item.ZxtdNum)),
							type: 'bar',
							name: '专线退单量',
							stack: '总和',
							itemStyle: {
								color: '#FF3B2F',
							},
							barWidth: 6,
							yAxisIndex: 0,
						},
						{
							data: that.ZxslCitys.map(item => (item.ZxwcNum != 0 ? item.ZxslNum/100 : 0)),
							type: 'bar',
							name: '',
							stack: '总和',
							itemStyle: {
								color: '#fff',
							},
							barWidth: 6,
						},
						{
							data: that.ZxslCitys.map(item => item.ZxwcNum),
							type: 'bar',
							name: '专线完成量',
							stack: '总和',
							itemStyle: {
								color: '#0CB480',
							},
							barWidth: 6,
							yAxisIndex: 0,
						}
					]
				};
				let option3 = {
					grid: {
						top: '20rpx',
						left: '50rpx',
						right: '20rpx'
					},
					tooltip: {
						trigger: 'item',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						show: true,
						showDelay:100,
						backgroundColor: '#656565', // 背景颜色改为黑色
						formatter: params => {
							return (
								params.name +
							'\n' +
							'专线退单率: ' +
							that.ZxtdCitys.map(item => item.ZxtdRate)[params.dataIndex] +'%' +
														
							'\n' +
							'网络原因退单率: ' +
							that.ZxtdCitys.map(item => item.ZxwlyytdRate)[params.dataIndex] +'%'
							)
						}
					},
					xAxis: {
						axisLine: { 
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: that.ZxtdCitys.map(object => object.Name),
						axisLabel: {
							interval: 0,
							fontSize: 10, // 设置字体大小
							color:'#5F6475',
							formatter: function (value) {
								return value.split("").join("\n") //垂直显示
							},
						}
					},
					yAxis: {
						axisLabel: {
							color: '#5C5C5C', // 设置标签颜色
							fontSize: 10, // 设置字体大小
							formatter: value => `${value}%` // 取整并显示百分比
						},
						type: 'value',
						// max: that.pageData.DkqltzRate, // 设置Y轴的最大值为1
						axisLine: {
							show: true, // 显示y轴
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						},
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						}
					},
					series: [
						{
							data: that.ZxtdCitys.map(item => item.ZxwlyytdRate),
							type: 'bar',
							name: '网络原因退单率',
							stack: '总和',
							itemStyle: {
								color: '#1B9CFF',
							},
							// markLine: {
							// 	data: [{
							// 		type: 'line',
							// 		name: '挑战值',
							// 		yAxis: that.pageData2.ZxtdtzRate,
							// 		lineStyle: {
							// 			color: '#FF0000',
							// 			type: 'dashed'
							// 		},
							// 		label: {
							// 			show: false // 不显示标签
							// 		}
							// 	}],
							// 	symbol: ['none', 'none'] 
							// },
							barWidth: 6,
						},
						{
							data: that.ZxtdCitys.map(item => (item.ZxwlyytdRate != 0 ? item.ZxwlyytdRate/100 : 0)),
							type: 'bar',
							name: '',
							stack: '总和',
							itemStyle: {
								color: '#fff',
							},
							barWidth: 6,
						},
						{
							data: that.ZxtdCitys.map(object => object.zdyData1),
							barCategoryGap: '100',
							type: 'bar',
							name: '',
							stack: '总和',
							itemStyle: {
								color: function(params) {
									// 如果数据值大于，则柱子颜色为绿色
									if (params.value <= that.pageData2.ZxtdtzRate) {
										return '#0CB480';
									}
									// 其他情况使用默认颜色
									return '#FF3B2F';
								},
								// borderRadius: 4,
								borderWidth: 0
							},
							markLine: {
								data: [{
									type: 'line',
									name: '挑战值',
									yAxis: that.pageData2.ZxtdtzRate,
									lineStyle: {
										color: '#FF0000',
										type: 'dashed'
									},
									label: {
										show: false // 不显示标签
									}
								}],
								symbol: ['none', 'none'] 
							},
							barWidth: 6
						},
						
					]
				}
				let option5 = {
					grid: {
						top: '20rpx',
						bottom: '45rpx',
						left: '50rpx'
					},
					tooltip: {
						trigger: 'item',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						show: true,
						showDelay:100,
						backgroundColor: '#656565', // 背景颜色改为黑色
						formatter: params => {
							return (
								params.name +
								'\n' +
								'商客宽带受理量: ' +
								that.SkkdslCitys.map(item => item.SkkdslNum)[params.dataIndex] +
							
								'\n' +
								'商客宽带完成量: ' +
								that.SkkdslCitys.map(item => item.SkkdwcNum)[params.dataIndex] +
								
								'\n' +
								'商客宽带退单量: ' +
								that.SkkdslCitys.map(item => item.SkkdtdNum)[params.dataIndex] +
							
								'\n' +
								'商客宽带在途量: ' +
								that.SkkdslCitys.map(item => item.SkkdztNum)[params.dataIndex]
							
							)
						}
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#A4A8B7', // 线条颜色
								fontSize: 10, // 设置字体大小
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: that.SkkdslCitys.map(item => item.Name),
						axisLabel: {
							interval: 0,
							fontSize: 10, // 设置字体大小
							color:'#5F6475',
							formatter: function (value) {
								return value.split("").join("\n") //垂直显示
							},
						}
					},
					yAxis: [{
						axisLabel: {
							color: '#A7ABBB', // 设置标签颜色
							fontSize: 10, // 设置字体大小
						},
						type: 'value',
					}],
					series: [
						{
							data: that.SkkdslCitys.map(item => item.SkkdztNum),
							type: 'bar',
							name: '商客宽带在途量',
							stack: '总和',
							itemStyle: {
								color: '#1B9CFF',
							},
							barWidth: 6,
						},
						{
							data: that.SkkdslCitys.map(item => (item.SkkdtdNum != 0 ? item.SkkdslNum/100 : 0)),
							type: 'bar',
							name: '',
							stack: '总和',
							itemStyle: {
								color: '#fff',
							},
							barWidth: 6,
						},
						{
							data: that.SkkdslCitys.map(item => item.SkkdtdNum),
							type: 'bar',
							name: '商客宽带退单量',
							stack: '总和',
							itemStyle: {
								color: '#FF3B2F',
							},
							barWidth: 6,
						},
						{
							data: that.SkkdslCitys.map(item => (item.SkkdwcNum != 0 ? item.SkkdslNum/100 : 0)),
							type: 'bar',
							name: '',
							stack: '总和',
							itemStyle: {
								color: '#fff',
							},
							barWidth: 6,
						},
						{
							data: that.SkkdslCitys.map(item => item.SkkdwcNum),
							type: 'bar',
							name: '商客宽带完成量',
							stack: '总和',
							itemStyle: {
								color: '#0CB480',
							},
							barWidth: 6,
						}
					]
				};
				let option6 = {
					grid: {
						top: '20rpx',
						left: '50rpx',
						right: '20rpx'
					},
					tooltip: {
						trigger: 'item',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						show: true,
						showDelay:100,
						backgroundColor: '#656565', // 背景颜色改为黑色
						formatter: params => {
							return (
								params.name +
							'\n' +
							'商客宽带退单率: ' +
							that.SkkdtdCitys.map(item => item.SkkdtdRate)[params.dataIndex] +'%' +
														
							'\n' +
							'网络原因退单率: ' +
							that.SkkdtdCitys.map(item => item.SkkdwlyytdRate)[params.dataIndex] +'%'
							)
						}
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: that.SkkdtdCitys.map(item => item.Name),
						axisLabel: {
							interval: 0,
							fontSize: 10, // 设置字体大小
							color:'#5F6475',
							formatter: function (value) {
								return value.split("").join("\n") //垂直显示
							},
						}
					},
					yAxis: {
						axisLabel: {
							color: '#5C5C5C', // 设置标签颜色
							fontSize: 10, // 设置字体大小
							formatter: value => `${value}%` // 取整并显示百分比
						},
						type: 'value',
						// max: that.pageData.DkqltzRate, // 设置Y轴的最大值为1
						axisLine: {
							show: true, // 显示y轴
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						},
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						}
					},
					series: [
						{
							data: that.SkkdtdCitys.map(item => item.SkkdwlyytdRate),
							type: 'bar',
							name: '网络原因退单率',
							stack: '总和',
							itemStyle: {
								color: '#1B9CFF',
							},
							// markLine: {
							// 	data: [{
							// 		type: 'line',
							// 		name: '挑战值',
							// 		yAxis: that.pageData2.ZxtdtzRate,
							// 		lineStyle: {
							// 			color: '#FF0000',
							// 			type: 'dashed'
							// 		},
							// 		label: {
							// 			show: false // 不显示标签
							// 		}
							// 	}],
							// 	symbol: ['none', 'none'] 
							// },
							barWidth: 6,
						},
						{
							data: that.SkkdtdCitys.map(item => (item.SkkdtdtzRate != 0 ? item.SkkdtdtzRate/100 : 0)),
							type: 'bar',
							name: '',
							stack: '总和',
							itemStyle: {
								color: '#fff',
							},
							barWidth: 6,
						},
						{
							data: that.SkkdtdCitys.map(item => item.zdyData1),
							barCategoryGap: '100',
							type: 'bar',
							name: '',
							stack: '总和',
							itemStyle: {
								color: function(params) {
									// 如果数据值大于，则柱子颜色为绿色
									if (params.value <= that.pageData2.SkkdtdtzRate) {
										return '#0CB480';
									}
									// 其他情况使用默认颜色
									return '#FF3B2F';
								},
								borderWidth: 0
							},
							markLine: {
								data: [{
									type: 'line',
									name: '挑战值',
									yAxis: that.pageData2.SkkdtdtzRate,
									lineStyle: {
										color: '#FF0000',
										type: 'dashed'
									},
									label: {
										show: false // 不显示标签
									}
								}],
								symbol: ['none', 'none'] 
							},
							barWidth: 5
						}
					]
				}
				let option8 = {
					grid: {
						top: '20rpx',
						bottom: '45rpx',
						left: '50rpx'
					},
					tooltip: {
						trigger: 'item',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						show: true,
						showDelay:100,
						backgroundColor: '#656565', // 背景颜色改为黑色
						formatter: params => {
							return (
								params.name +
								'\n' +
								'专线受理量: ' +
								that.FttoslCitys.map(item => item.FttoslNum)[params.dataIndex] +
							
								'\n' +
								'FTTO完成量: ' +
								that.FttoslCitys.map(item => item.FttowcNum)[params.dataIndex] +
								
								'\n' +
								'FTTO退单量: ' +
								that.FttoslCitys.map(item => item.FttotdNum)[params.dataIndex] +
							
								'\n' +
								'FTTO在途量: ' +
								that.FttoslCitys.map(item => item.FttoztNum)[params.dataIndex] 
							)
						}
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#A4A8B7', // 线条颜色
								fontSize: 10, // 设置字体大小
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: that.FttoslCitys.map(item => item.Name),
						axisLabel: {
							interval: 0,
							fontSize: 10, // 设置字体大小
							color:'#5F6475',
							formatter: function (value) {
								return value.split("").join("\n") //垂直显示
							},
						}
					},
					yAxis: [{
						axisLabel: {
							color: '#A7ABBB', // 设置标签颜色
							fontSize: 10, // 设置字体大小
						},
						type: 'value',
					}],
					series: [
						{
							data: that.FttoslCitys.map(item => item.FttoztNum),
							type: 'bar',
							name: 'FTTO在途量',
							stack: '总和',
							itemStyle: {
								color: '#1B9CFF',
							},
							barWidth: 6,
						},
						{
							data: that.FttoslCitys.map(item => (item.FttotdNum != 0 ? item.FttoslNum/100 : 0)),
							type: 'bar',
							name: '',
							stack: '总和',
							itemStyle: {
								color: '#fff',
							},
							barWidth: 6,
						},
						{
							data: that.FttoslCitys.map(item => item.FttotdNum),
							type: 'bar',
							name: 'FTTO退单量',
							stack: '总和',
							itemStyle: {
								color: '#FF3B2F',
							},
							barWidth: 6,
						},
						{
							data: that.FttoslCitys.map(item => (item.FttowcNum != 0 ? item.FttoslNum/100 : 0)),
							type: 'bar',
							name: '',
							stack: '总和',
							itemStyle: {
								color: '#fff',
							},
							barWidth: 6,
						},
						{
							data: that.FttoslCitys.map(item => item.FttowcNum),
							type: 'bar',
							name: 'FTTO完成量',
							stack: '总和',
							itemStyle: {
								color: '#0CB480',
							},
							barWidth: 6,
						}
					]
				};
				let option9 = {
					grid: {
						top: '20rpx',
						left: '50rpx',
						right: '20rpx'
					},
					tooltip: {
						trigger: 'item',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						show: true,
						showDelay:100,
						backgroundColor: '#656565', // 背景颜色改为黑色
						formatter: params => {
							return (
								params.name +
							'\n' +
							'FTTO退单率: ' +
							that.FttotdCitys.map(item => item.FttotdRate)[params.dataIndex] +'%' +
														
							'\n' +
							'网络原因退单率: ' +
							that.FttotdCitys.map(item => item.FttowlyytdRate)[params.dataIndex] +'%'
							)
						}
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: that.FttotdCitys.map(item => item.Name),
						axisLabel: {
							interval: 0,
							fontSize: 10, // 设置字体大小
							color:'#5F6475',
							formatter: function (value) {
								return value.split("").join("\n") //垂直显示
							},
						}
					},
					yAxis: {
						axisLabel: {
							color: '#5C5C5C', // 设置标签颜色
							fontSize: 10, // 设置字体大小
							formatter: value => `${value}%` // 取整并显示百分比
						},
						type: 'value',
						// max: that.pageData.DkqltzRate, // 设置Y轴的最大值为1
						axisLine: {
							show: true, // 显示y轴
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						},
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						}
					},
					series: [
						{
							data: that.FttotdCitys.map(item => item.FttowlyytdRate),
							type: 'bar',
							name: '网络原因退单率',
							stack: '总和',
							itemStyle: {
								color: '#1B9CFF',
							},
							// markLine: {
							// 	data: [{
							// 		type: 'line',
							// 		name: '挑战值',
							// 		yAxis: that.pageData2.ZxtdtzRate,
							// 		lineStyle: {
							// 			color: '#FF0000',
							// 			type: 'dashed'
							// 		},
							// 		label: {
							// 			show: false // 不显示标签
							// 		}
							// 	}],
							// 	symbol: ['none', 'none'] 
							// },
							barWidth: 6,
						},
						{
							data: that.FttotdCitys.map(item => (item.FttotdtzRate != 0 ? item.FttotdtzRate/100 : 0)),
							type: 'bar',
							name: '',
							stack: '总和',
							itemStyle: {
								color: '#fff',
							},
							barWidth: 6,
						},
						{
							data: that.FttotdCitys.map(item => item.zdyData1),
							barCategoryGap: '100',
							type: 'bar',
							name: '',
							stack: '总和',
							itemStyle: {
								color: function(params) {
									// 如果数据值大于，则柱子颜色为绿色
									if (params.value <= that.pageData2.FttotdtzRate) {
										return '#0CB480';
									}
									// 其他情况使用默认颜色
									return '#FF3B2F';
								},
								borderWidth: 0
							},
							markLine: {
								data: [{
									type: 'line',
									name: '挑战值',
									yAxis: that.pageData2.FttotdtzRate,
									lineStyle: {
										color: '#FF0000',
										type: 'dashed'
									},
									label: {
										show: false // 不显示标签
									}
								}],
								symbol: ['none', 'none'] 
							},
							barWidth: 5
						}
					]
				}
				
				const chart2 = await that.$refs.chartRefZq02.init(echarts)
				chart2.setOption(option2);
				const chart3 = await that.$refs.chartRefZq03.init(echarts)
				chart3.setOption(option3);
			
				const chart5 = await that.$refs.chartRefZq05.init(echarts)
				chart5.setOption(option5);
				const chart6 = await that.$refs.chartRefZq06.init(echarts)
				chart6.setOption(option6);
				
				const chart8 = await that.$refs.chartRefZq08.init(echarts)
				chart8.setOption(option8);
				const chart9 = await that.$refs.chartRefZq09.init(echarts)
				chart9.setOption(option9);
			},
			async init6() {
				let that = this
				let option1 = {
				  tooltip: {
					trigger: 'item',
					confine: true,
					textStyle: { // 自定义 tooltip 文本样式
						fontSize: 10, // 字体大小
						fontWeight: 'bold', // 字体粗细
					},
					formatter: function (params) {
						// 根据 params 返回的数据自定义 tooltip 显示内容
						return params.name + ' : ' + params.value ;
					}
				  },
				   graphic: {
					  type: 'text',
					  left: '26%',
					  top: '39%',
					  style: {
						  text: '全省\n数据',
						  textAlign: 'center',
						  fill: '#5F6475',
						  fontSize: 12
					  }
				  },
				  legend: {
					orient: 'vertical',
					left: 155,
					top: 'center',
					itemWidth: 12, // 设置图例项的宽度为12px
					itemHeight: 12, // 设置图例项的宽度为12px
					textStyle: {        // 图例文字的样式
						color: '#000',   // 文字颜色
						fontSize: 12,    // 文字大小
						verticalAlign: 'middle', // 垂直居中对齐
						align: 'center' // 水平居中对齐
					},
				  },
				  series: [
					{
					  name: 'Access From',
					  type: 'pie',
					 center: ['30%', '50%'], // 饼图的中心位置，相对于容器的百分比
					 radius: ['32%', '55%'],	
					  avoidLabelOverlap: false,
					  
					  label: {
						show: false,
						position: 'center'
					  },
					  emphasis: {
						label: {
						  show: false,
						  fontSize: 14,
						  fontWeight: 'bold'
						}
					  },
					  labelLine: {
						show: false
					  },
					  data: that.arr3,
					  color: ['#0CB480','#FF3B2F','#1B9CFF'] // 指定每个扇区的颜色
					}
				  ]
				}
				let option4 = {
				  tooltip: {
					trigger: 'item',
					confine: true,
					textStyle: { // 自定义 tooltip 文本样式
						fontSize: 10, // 字体大小
						fontWeight: 'bold', // 字体粗细
					},
					formatter: function (params) {
						// 根据 params 返回的数据自定义 tooltip 显示内容
						return params.name + ' : ' + params.value ;
					}
				  },
				   graphic: {
					  type: 'text',
					  left: '25%',
					  top: 'center',
					  style: {
						  text: '全省\n数据',
						  textAlign: 'center',
						  fill: '#5F6475',
						  fontSize: 12
					  }
				  },
				  legend: {
					orient: 'vertical',
					left: 150,
					top: 'center',
					itemWidth: 12, // 设置图例项的宽度为12px
					itemHeight: 12, // 设置图例项的宽度为12px
					textStyle: {        // 图例文字的样式
						color: '#000',   // 文字颜色
						fontSize: 12,    // 文字大小
						verticalAlign: 'middle', // 垂直居中对齐
						align: 'center' // 水平居中对齐
					},
				  },
				  series: [
					{
					  name: 'Access From',
					  type: 'pie',
					  center: ['30%', '50%'], // 饼图的中心位置，相对于容器的百分比
					  radius: ['32%', '55%'],
					  avoidLabelOverlap: false,
					  
					  label: {
						show: false,
						position: 'center'
					  },
					  emphasis: {
						label: {
						  show: false,
						  fontSize: 14,
						  fontWeight: 'bold'
						}
					  },
					  labelLine: {
						show: false
					  },
					  data: that.arr4,
					  color: ['#0CB480','#FF3B2F','#1B9CFF'] // 指定每个扇区的颜色
					}
				  ]
				}
				let option7 = {
				  tooltip: {
					trigger: 'item',
					confine: true,
					textStyle: { // 自定义 tooltip 文本样式
						fontSize: 10, // 字体大小
						fontWeight: 'bold', // 字体粗细
					},
					formatter: function (params) {
						// 根据 params 返回的数据自定义 tooltip 显示内容
						return params.name + ' : ' + params.value ;
					}
				  },
				   graphic: {
					  type: 'text',
					  left: '25%',
					  top: 'center',
					  style: {
						  text: '全省\n数据',
						  textAlign: 'center',
						  fill: '#5F6475',
						  fontSize: 12
					  }
				  },
				  legend: {
					orient: 'vertical',
					left: 150,
					top: 'center',
					itemWidth: 12, // 设置图例项的宽度为12px
					itemHeight: 12, // 设置图例项的宽度为12px
					textStyle: {        // 图例文字的样式
						color: '#000',   // 文字颜色
						fontSize: 12,    // 文字大小
						verticalAlign: 'middle', // 垂直居中对齐
						align: 'center' // 水平居中对齐
					},
				  },
				  series: [
					{
					  name: 'Access From',
					  type: 'pie',
					  center: ['30%', '50%'], // 饼图的中心位置，相对于容器的百分比
					  radius: ['32%', '55%'],
					  avoidLabelOverlap: false,
					  
					  label: {
						show: false,
						position: 'center'
					  },
					  emphasis: {
						label: {
						  show: false,
						  fontSize: 14,
						  fontWeight: 'bold'
						}
					  },
					  labelLine: {
						show: false
					  },
					  data: that.arr5,
					  color: ['#0CB480','#FF3B2F','#1B9CFF'] // 指定每个扇区的颜色
					}
				  ]
				}
				
				const chart1 = await that.$refs.chartRefZq01.init(echarts)
				chart1.setOption(option1)
				const chart4 = await that.$refs.chartRefZq04.init(echarts)
				chart4.setOption(option4)
				const chart7 = await that.$refs.chartRefZq07.init(echarts)
				chart7.setOption(option7)
			}
		}
	}
</script>


<style lang="scss" scoped>
	.content{
		width: 750rpx;
		background: url(@/static/images/AgoodStart/bg.png) no-repeat;
		background-size: 750rpx;
		background-color: #FF7845;
		padding-bottom: 30rpx;
		position: relative;
		padding-top: 110rpx;
		.content_date{
			padding: 14rpx 30rpx;
			color: #fff;
			font-weight: bold;
			font-size: 28rpx;
			position: absolute;
			top:30rpx;
			right: 20rpx;
			background-color: #FF6D2E;
			border-radius: 40rpx;
		}
		.phoneList_view{
			width: 70rpx;
			height: 70rpx;
			position: absolute;
			top:30rpx;
			right: 30rpx;
			background: #FF7845;
			border-radius: 16rpx;
			.phoneList_icon{
				width: 40rpx;
				height: 40rpx;
				margin: 16rpx;
			}
		}
		.tabNav,.tabNav2{
			width: 750rpx;
			height: 100rpx;
			display: inline-block;
			display: flex;
			align-items: center;
			background: url(@/static/images/AgoodStart/tabLeft.png) no-repeat;
			background-size: 750rpx;
			margin: 0 auto;
			.tabNav_item{
				width: 375rpx;
				height: 100rpx;
				line-height: 125rpx;
				text-align: center;
			}
		}
		.tabNav2{
			background: url(@/static/images/AgoodStart/tabRig.png) no-repeat;
			background-size: 750rpx;
		}
		.content_nr{
			width: 702rpx;
			padding-top: 760rpx;
			margin-left: 20rpx;
			.wlnltsView{
				background: url(@/static/images/AgoodStart/box_s.png) no-repeat;
				background-size: 702rpx;
				
				background-position: 0 64rpx;
				padding-top: 16rpx;
				.wlnltsView_TitleTop{
					height: 70rpx;
					margin: 0 auto;
					display: block;
				}
				.wlnltsView_nr{
					background: url(@/static/images/AgoodStart/titlebg_l.png) no-repeat;
					background-size: 656rpx;
					background-position: 28rpx 0rpx;
					font-weight: 600;
					font-size: 34rpx;
					height: 84rpx;
					line-height: 80rpx;
					color: #FFFFFF;
					text-align: center;
				}
				.statisticalCycle{
					width: 654rpx;
					margin: -4rpx 0  0 30rpx;
					height: 66rpx;
					line-height: 62rpx;
					text-align: center;
					font-size: 28rpx;
					color: #D61515;
					background-color: #FFEFB9;
				}
				
				.bg2{
					background: url(@/static/images/AgoodStart/titlebg_s.png) no-repeat;
					background-size: 656rpx;
					background-position: 28rpx 0;
				}
				.bg3{
					background: url(@/static/images/AgoodStart/titlebg_m.png) no-repeat;
					background-size: 656rpx;
					background-position: 28rpx 0;
				}
				.bg4{
					background: url(@/static/images/AgoodStart/titlebg_xl.png) no-repeat;
					background-size: 656rpx;
					background-position: 28rpx 0;
				}
				.wlnltsView_nr2{
					width: 654rpx;
					margin: 0 auto;
					margin-left: 30rpx;
					height: 76rpx;
					background-color: #FFDFCD;
					display: flex;
					align-items: center;
					position: relative;
					
					.wlnltsView_icon{
						width: 60rpx;
						margin: 0 14rpx;
					}
					.wlnltsView_qssj{
						font-size: 28rpx;
						color: #000000
					}
					.wlnltsView_qssjNr{
						font-size: 28rpx;
						color: #D61515;
						font-weight: bold;
					}
					.success_icon{
						width: 92rpx;
						position: absolute;
						right: 0;
						top: 0;
						z-index: 100;
					}
				}
				.echart_data{
					width: 100rpx;
					height: 208rpx;
					color: #000;
					font-weight: bold;
					font-size: 28rpx;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
				}
				.tiaozhanNum{
					width: 244rpx;
					height: 76rpx;
					line-height: 70rpx;
					background: url(@/static/images/AgoodStart/bfbBg.png) no-repeat;
					background-size: 244rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					text-indent: 80rpx;
					margin-left: 10rpx;
				}
				.TuiDanLv{
					display: block;
					.TuiDanLv_top{
						height: 100rpx;
						background: url(@/static/images/AgoodStart/titleBg.png) no-repeat;
						background-size: 626rpx;
						background-position: 32rpx 32rpx;
						position: relative;
						display: flex;
						align-items: center;
						padding-right: 24rpx;
						.TuiDanLv_top_title{
							margin-left: 110rpx;
							font-weight: bold;
						}
						.wlnltsView_icon{
							width: 98rpx;
							margin-left: auto;
							margin-top: 10rpx;
						}
					}
					.TuiDanLv_bom{
						display: flex;
						justify-content: space-between;
						padding: 0 20rpx;
						.TuiDanLv_bom_left{
							width: 340rpx;
						}
						.TuiDanLv_bom_right{
							width: 260rpx;
							.TuiDanLv_qsData{
								display: flex;
								align-items: center;
								.TuiDanLv_qsData_icon{
									width: 118rpx;
									margin-left: -16rpx;
								}
								.TuiDanLv_qsData_nr{
									display: block;
									font-family: PingFang SC, PingFang SC;
									font-weight: 400;
									font-size: 28rpx;
									color: #000000;
								}
								.TuiDanLv_qsData_nr_num{
									font-weight: bold;
									font-size: 36rpx;
									color: #FF3B2F;
								}
							}
							.TuiDanLv_qsData_phb{
								width: 260rpx;
								height: 176rpx;
								background: url(@/static/images/AgoodStart/phbBg.png) no-repeat;
								background-size: 240rpx 100%;
								line-height: 270rpx;
								text-align: center;
								font-weight: bold;
								font-size: 24rpx;
								color: #000000;
								margin: 10rpx auto 20rpx;
							}
							.TuiDanLv_qsData_phb2{
								margin-top: 30rpx;
								.TuiDanLv_qsData_phbList{
									display: flex;
									align-items: center;
									.solt{
										width: 30rpx;
										height: 30rpx;
										text-align: center;
										line-height: 26rpx;
										background: #0CB480;
										font-family: SourceHanSansSC-Bold, SourceHanSansSC-Bold;
										font-weight: normal;
										font-size: 26rpx;
										color: #FFFFFF;
										margin-right: 14rpx;
										border-radius: 50%;
									}
									.cityName{
										height: 40rpx;
										font-family: PingFang SC, PingFang SC;
										font-weight: 400;
										font-size: 28rpx;
										color: #000000;
										text-align: left;
										font-style: normal;
										text-transform: none;
										margin-right: 14rpx;
									}
									.cityNum{
										font-weight: bold;
										font-size: 28rpx;
										color: #0CB480;
										line-height: 30rpx;
										text-align: left;
										font-style: normal;
										text-transform: none;
									}
								}
							}
						}
					}
				}
			}
			.topText{
				width: 680rpx;
				height: 110rpx;
				line-height: 80rpx;
				text-align: center;
				color: #fff;
				font-weight: bold;
				font-size: 46rpx;
				margin-left: 20rpx;
				margin-top: 20prx;
				border-radius: 40rpx 40rpx 0 0;
				background-color: #FF6106;
			}
			.wlnltsViewBg2{
				height: 1580rpx;
				background: url(@/static/images/AgoodStart/box_l.png) no-repeat;
				background-size: 702rpx 100%;
				background-position: 0 64rpx;
			}
			.wlnltsViewBg3{
				background: url(@/static/images/AgoodStart/box_xl.png) no-repeat;
				background-size: 702rpx 100%;
				background-position: 0 64rpx;
			}
			.fengexian{
				width: 610rpx;
				height: 10rpx;
				background: #F0EFF5;
				border-radius: 8rpx;
				margin: 0 auto;
			}
			.zwdrbzqk{
				display: flex;
				width: 600rpx;
				margin: 20rpx auto;
				.zwdrbzqk_leftCity{
					width: 100rpx;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					padding-top: 30rpx;
					.xuhao{
						width: 74rpx;
						height: 40rpx;
						font-family: Roboto, Roboto;
						font-weight: bold;
						font-size: 30rpx;
						color: #FF4D4D;
						line-height: 40rpx;
						text-align: center;
						margin-bottom: 25rpx;
					}
					.zwdrbzqk_leftCity_nr{
						height: 42rpx;
						line-height: 42rpx;
						padding: 0 16rpx;
						font-size: 20rpx;
						color: #5F6475;
						background: #FFD7D5;
						border-radius: 8rpx;
						margin: 3rpx 0;
						display: flex;
						align-items: center;
					}
				}
				.zwdrbzqk_right{
					width: 496rpx;
					margin: 0 auto;
					.zwdrbzqk_topTitle{
							width: max-content;
							display: flex;
							flex-wrap: nowrap;
						.zwdrbzqk_leftCity_nr2{
							text-align: center;
							padding: 8rpx 0;
							font-size: 20rpx;
							color: #5F6475;
							background: #FFD7D5;
							border-radius: 8rpx;
							margin-right: 10rpx;
							white-space: nowrap;
						}
					}
					.zwdrbzqk_Num{
						margin-top: 4rpx;
						.zwdrbzqk_leftCity_nr3{
							width: max-content;
							display: flex;
							flex-wrap: nowrap;
							.zwdrbzqk_NumItem{
								width: auto;
								font-weight: bold;
								font-size: 20rpx;
								color: #000000;
								height: 42rpx;
								text-align: center;
								line-height: 42rpx;
								background: #FFEBE9;
								border-radius: 8rpx;
								margin: 6rpx 10rpx 6rpx 0;
								white-space: nowrap;
							}
						}
						
					}
				}
			}
			.beizhu{
				color: #FF3B2F;
				font-size: 28rpx;
				margin-left: 50rpx;
			}
			.bomIcon_view{
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.bomIcon1{
					width: 154rpx;
					margin-right: 28rpx;
				}
				.bomIcon2{
					width: 156rpx;
				}
			}
		}
		.dashed-border-top {
		  width: 600rpx;
		  margin: 0 auto;
		  border-top-style: dashed;
		  border-top-color: #D5D5D5;
		  border-top-width: 2rpx; /* 虚线宽度 */
		}
		//tab2
		.xuxian_nr{
			width: 606rpx;
			text-align: center;
			border-top: 1px dashed #A8A8A8;
			border-bottom: 1px dashed #A8A8A8;
			margin: -10rpx auto 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #000000;
			font-style: normal;
			text-transform: none;
			.xuxian_nr1{
				height: 96rpx;
				line-height: 96rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.sekuai{
					width: 26rpx;
					height: 26rpx;
					border-radius: 6rpx;
					background: #971AD4;
					margin-right: 20rpx;
				}
			}
			
			
		}
		.xuxian_nr2{
			width: 630rpx;
			margin: 0 auto;
			font-size: 28rpx;
			text-align: center;
		}
	}
</style>